import { createSignal, For } from "solid-js";
import { RadioGroup } from "pettyui/radio-group";
import { ToggleGroup } from "pettyui/toggle-group";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "pettyui/select";
import { Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxItem } from "pettyui/combobox";
import { Listbox } from "pettyui/listbox";
import { Slider } from "pettyui/slider";
import { ComponentDemo } from "../component-demo";

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

/** RadioGroup demo with 3 mutually exclusive options. */
function RadioGroupDemo() {
  const content = (
    <RadioGroup defaultValue="option-b" class="flex flex-col gap-2">
      <For each={["option-a", "option-b", "option-c"]}>
        {(value) => (
          <RadioGroup.Item value={value} class="flex items-center gap-2 cursor-pointer group">
            <div class="w-4 h-4 rounded-full border-2 flex items-center justify-center border-gray-300 group-data-[state=checked]:border-indigo-600">
              <div class="w-2 h-2 rounded-full bg-indigo-600 hidden group-data-[state=checked]:block" />
            </div>
            <span class="text-sm text-gray-700">Option {value.split("-")[1]?.toUpperCase()}</span>
          </RadioGroup.Item>
        )}
      </For>
    </RadioGroup>
  );
  return content;
}

/** ToggleGroup demo with single selection alignment. */
function ToggleGroupDemo() {
  const content = (
    <ToggleGroup type="single" defaultValue="center" class="flex gap-1">
      <ToggleGroup.Item value="left" class="px-3 py-1.5 text-sm border rounded-l transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Left</ToggleGroup.Item>
      <ToggleGroup.Item value="center" class="px-3 py-1.5 text-sm border-y transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Center</ToggleGroup.Item>
      <ToggleGroup.Item value="right" class="px-3 py-1.5 text-sm border rounded-r transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Right</ToggleGroup.Item>
    </ToggleGroup>
  );
  return content;
}

/** Select demo with fruit dropdown. */
function SelectDemo() {
  const content = (
    <Select items={fruits} class="relative w-48">
      <SelectTrigger class="w-full flex items-center justify-between border border-gray-300 rounded px-3 py-1.5 text-sm hover:bg-gray-50">
        <SelectValue class="text-gray-700" placeholder="Pick a fruit" />
        <span class="text-gray-400">▾</span>
      </SelectTrigger>
      <SelectContent class="absolute top-full mt-1 w-full border border-gray-200 rounded bg-white shadow-lg z-10">
        <For each={fruits}>
          {(fruit) => (
            <SelectItem value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50">{fruit}</SelectItem>
          )}
        </For>
      </SelectContent>
    </Select>
  );
  return content;
}

/** Combobox demo with searchable fruit list. */
function ComboboxDemo() {
  const content = (
    <Combobox items={fruits} class="relative w-48">
      <div class="flex items-center border border-gray-300 rounded">
        <ComboboxInput class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" placeholder="Search fruits..." />
        <ComboboxTrigger class="px-2 text-gray-400">▾</ComboboxTrigger>
      </div>
      <ComboboxContent class="absolute top-full mt-1 w-full border border-gray-200 rounded bg-white shadow-lg z-10">
        <For each={fruits}>
          {(fruit) => (
            <ComboboxItem value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50">{fruit}</ComboboxItem>
          )}
        </For>
      </ComboboxContent>
    </Combobox>
  );
  return content;
}

/** Listbox demo with inline selectable items. */
function ListboxDemo() {
  const content = (
    <Listbox items={fruits} class="w-48 border border-gray-200 rounded overflow-hidden">
      <For each={fruits}>
        {(fruit) => (
          <Listbox.Item value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50 aria-selected:bg-indigo-100 aria-selected:text-indigo-700">{fruit}</Listbox.Item>
        )}
      </For>
    </Listbox>
  );
  return content;
}

/** Slider demo with value display. */
function SliderDemo() {
  const [value, setValue] = createSignal(40);
  const content = (
    <div class="w-64">
      <div class="flex justify-between text-sm text-gray-500 mb-2">
        <span>Volume</span>
        <span>{value()}%</span>
      </div>
      <Slider value={value()} onValueChange={setValue} min={0} max={100} class="relative h-5 flex items-center">
        <Slider.Track class="h-1.5 w-full bg-gray-200 rounded-full relative">
          <Slider.Range class="absolute h-full bg-indigo-600 rounded-full" />
        </Slider.Track>
        <Slider.Thumb class="absolute w-4 h-4 bg-white border-2 border-indigo-600 rounded-full shadow -translate-x-1/2 cursor-pointer" />
      </Slider>
    </div>
  );
  return content;
}

/** Inputs Selection section with choice and range components. */
export function InputsSelectionSection() {
  const content = (
    <>
      <ComponentDemo name="RadioGroup" description="Group of mutually exclusive options where only one can be selected">
        <RadioGroupDemo />
      </ComponentDemo>
      <ComponentDemo name="ToggleGroup" description="Group of toggle buttons where one or multiple can be selected">
        <ToggleGroupDemo />
      </ComponentDemo>
      <ComponentDemo name="Select" description="Dropdown for selecting a single option from a list">
        <SelectDemo />
      </ComponentDemo>
      <ComponentDemo name="Combobox" description="Searchable select that filters options as the user types">
        <ComboboxDemo />
      </ComponentDemo>
      <ComponentDemo name="Listbox" description="Inline list of selectable options with keyboard navigation">
        <ListboxDemo />
      </ComponentDemo>
      <ComponentDemo name="Slider" description="Range input for selecting numeric values by dragging a thumb along a track">
        <SliderDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
