import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Search } from "@lucide/vue"
import { computed, ref } from "vue"
import {
  Combobox,
  ComboboxAnchor,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxSeparator,
} from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Combobox",
  component: Combobox,
  tags: ["autodocs"],
  parameters: componentDoc("Combobox"),
} satisfies Meta<typeof Combobox>

export default meta
type Story = StoryObj<typeof meta>

const FRUITS = ["Apple", "Banana", "Blueberry", "Cherry", "Grape", "Mango", "Orange", "Peach", "Pear", "Plum"]

export const Default: Story = {
  render: () => ({
    components: {
      Combobox,
      ComboboxAnchor,
      ComboboxContent,
      ComboboxEmpty,
      ComboboxInput,
      ComboboxItem,
      ComboboxItemIndicator,
      Search,
    },
    setup() {
      const value = ref<string>()
      return { value, FRUITS }
    },
    template: `
      <div class="w-80 space-y-2">
        <Combobox v-model="value">
          <ComboboxAnchor>
            <Search class="w-4 h-4 mr-2 opacity-50 shrink-0" />
            <ComboboxInput placeholder="Pick a fruit..." />
          </ComboboxAnchor>
          <ComboboxContent>
            <ComboboxEmpty>No fruit matches.</ComboboxEmpty>
            <ComboboxItem v-for="f in FRUITS" :key="f" :value="f">
              <ComboboxItemIndicator />
              {{ f }}
            </ComboboxItem>
          </ComboboxContent>
        </Combobox>
        <div class="text-xs text-muted-foreground">Value: {{ value ?? "(none)" }}</div>
      </div>
    `,
  }),
}

export const AsyncSearch: Story = {
  name: "Async Search",
  render: () => ({
    components: {
      Combobox,
      ComboboxAnchor,
      ComboboxContent,
      ComboboxEmpty,
      ComboboxInput,
      ComboboxItem,
      ComboboxItemIndicator,
      Search,
    },
    setup() {
      const value = ref<string>()
      const query = ref("")
      const results = computed(() =>
        FRUITS.filter((f) => f.toLowerCase().includes(query.value.toLowerCase())),
      )
      return { value, query, results }
    },
    template: `
      <div class="w-80 space-y-2">
        <Combobox v-model="value" v-model:search-term="query">
          <ComboboxAnchor>
            <Search class="w-4 h-4 mr-2 opacity-50 shrink-0" />
            <ComboboxInput placeholder="Type to search..." />
          </ComboboxAnchor>
          <ComboboxContent>
            <ComboboxEmpty>Nothing found.</ComboboxEmpty>
            <ComboboxItem v-for="f in results" :key="f" :value="f">
              <ComboboxItemIndicator />
              {{ f }}
            </ComboboxItem>
          </ComboboxContent>
        </Combobox>
        <div class="text-xs text-muted-foreground">Query: "{{ query }}" — Picked: {{ value ?? "(none)" }}</div>
      </div>
    `,
  }),
}

export const MultiSelect: Story = {
  name: "Multi Select",
  render: () => ({
    components: {
      Combobox,
      ComboboxAnchor,
      ComboboxContent,
      ComboboxEmpty,
      ComboboxInput,
      ComboboxItem,
      ComboboxItemIndicator,
      Search,
    },
    setup() {
      const values = ref<string[]>([])
      return { values, FRUITS }
    },
    template: `
      <div class="w-80 space-y-2">
        <Combobox v-model="values" multiple>
          <ComboboxAnchor>
            <Search class="w-4 h-4 mr-2 opacity-50 shrink-0" />
            <ComboboxInput placeholder="Pick multiple fruits..." />
          </ComboboxAnchor>
          <ComboboxContent>
            <ComboboxEmpty>No fruit matches.</ComboboxEmpty>
            <ComboboxItem v-for="f in FRUITS" :key="f" :value="f">
              <ComboboxItemIndicator />
              {{ f }}
            </ComboboxItem>
          </ComboboxContent>
        </Combobox>
        <div class="text-xs text-muted-foreground">Selected: {{ values.join(", ") || "(none)" }}</div>
      </div>
    `,
  }),
}

export const Grouped: Story = {
  render: () => ({
    components: {
      Combobox,
      ComboboxAnchor,
      ComboboxContent,
      ComboboxEmpty,
      ComboboxGroup,
      ComboboxInput,
      ComboboxItem,
      ComboboxItemIndicator,
      ComboboxSeparator,
    },
    setup() {
      const value = ref<string>()
      return { value }
    },
    template: `
      <div class="w-80">
        <Combobox v-model="value">
          <ComboboxAnchor>
            <ComboboxInput placeholder="Search..." />
          </ComboboxAnchor>
          <ComboboxContent>
            <ComboboxEmpty>Nothing found.</ComboboxEmpty>
            <ComboboxGroup>
              <ComboboxItem value="apple"><ComboboxItemIndicator />Apple</ComboboxItem>
              <ComboboxItem value="banana"><ComboboxItemIndicator />Banana</ComboboxItem>
            </ComboboxGroup>
            <ComboboxSeparator />
            <ComboboxGroup>
              <ComboboxItem value="carrot"><ComboboxItemIndicator />Carrot</ComboboxItem>
              <ComboboxItem value="celery"><ComboboxItemIndicator />Celery</ComboboxItem>
            </ComboboxGroup>
          </ComboboxContent>
        </Combobox>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Combobox,
      ComboboxAnchor,
      ComboboxContent,
      ComboboxEmpty,
      ComboboxInput,
      ComboboxItem,
      ComboboxItemIndicator,
      Search,
    },
    setup() {
      const single = ref<string>()
      const multi = ref<string[]>([])
      return { single, multi, FRUITS }
    },
    template: `
      <div class="space-y-8 w-96">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Single select</h3>
          <Combobox v-model="single">
            <ComboboxAnchor>
              <Search class="w-4 h-4 mr-2 opacity-50 shrink-0" />
              <ComboboxInput placeholder="Pick a fruit" />
            </ComboboxAnchor>
            <ComboboxContent>
              <ComboboxEmpty>No matches.</ComboboxEmpty>
              <ComboboxItem v-for="f in FRUITS" :key="f" :value="f">
                <ComboboxItemIndicator />{{ f }}
              </ComboboxItem>
            </ComboboxContent>
          </Combobox>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Multi select</h3>
          <Combobox v-model="multi" multiple>
            <ComboboxAnchor>
              <Search class="w-4 h-4 mr-2 opacity-50 shrink-0" />
              <ComboboxInput placeholder="Pick several fruits" />
            </ComboboxAnchor>
            <ComboboxContent>
              <ComboboxEmpty>No matches.</ComboboxEmpty>
              <ComboboxItem v-for="f in FRUITS" :key="f" :value="f">
                <ComboboxItemIndicator />{{ f }}
              </ComboboxItem>
            </ComboboxContent>
          </Combobox>
        </section>
      </div>
    `,
  }),
}
