import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { ref } from "vue"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Select",
  component: Select,
  tags: ["autodocs"],
  parameters: componentDoc("Select"),
  argTypes: {
    disabled: { control: "boolean" },
  },
  args: { disabled: false },
} satisfies Meta<typeof Select>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: {
      Select,
      SelectContent,
      SelectGroup,
      SelectItem,
      SelectLabel,
      SelectTrigger,
      SelectValue,
    },
    setup() {
      const value = ref<string>()
      return { args, value }
    },
    template: `
      <div class="w-72 space-y-2">
        <Select v-bind="args" v-model="value">
          <SelectTrigger>
            <SelectValue placeholder="Pick a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Fruits</SelectLabel>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="cherry">Cherry</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <div class="text-xs text-muted-foreground">Value: {{ value ?? "(none)" }}</div>
      </div>
    `,
  }),
}

export const Grouped: Story = {
  render: () => ({
    components: {
      Select,
      SelectContent,
      SelectGroup,
      SelectItem,
      SelectLabel,
      SelectSeparator,
      SelectTrigger,
      SelectValue,
    },
    setup() {
      const value = ref<string>()
      return { value }
    },
    template: `
      <div class="w-72">
        <Select v-model="value">
          <SelectTrigger><SelectValue placeholder="Pick something" /></SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Fruits</SelectLabel>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup>
              <SelectLabel>Veggies</SelectLabel>
              <SelectItem value="carrot">Carrot</SelectItem>
              <SelectItem value="celery">Celery</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    `,
  }),
}

export const WithLabel: Story = {
  name: "With Label",
  render: () => ({
    components: {
      Select,
      SelectContent,
      SelectItem,
      SelectTrigger,
      SelectValue,
    },
    setup() {
      const value = ref<string>()
      return { value }
    },
    template: `
      <div class="w-72 space-y-2">
        <label class="text-sm font-medium" for="role">Role</label>
        <Select v-model="value">
          <SelectTrigger id="role"><SelectValue placeholder="Choose a role" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="admin">Admin</SelectItem>
            <SelectItem value="editor">Editor</SelectItem>
            <SelectItem value="viewer">Viewer</SelectItem>
          </SelectContent>
        </Select>
      </div>
    `,
  }),
}

export const States: Story = {
  render: () => ({
    components: {
      Select,
      SelectContent,
      SelectItem,
      SelectTrigger,
      SelectValue,
    },
    template: `
      <div class="grid grid-cols-2 gap-4 w-[480px]">
        <div>
          <div class="mb-1 text-xs uppercase opacity-60">Default</div>
          <Select>
            <SelectTrigger><SelectValue placeholder="Pick..." /></SelectTrigger>
            <SelectContent>
              <SelectItem value="a">Option A</SelectItem>
              <SelectItem value="b">Option B</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <div class="mb-1 text-xs uppercase opacity-60">Disabled</div>
          <Select disabled>
            <SelectTrigger><SelectValue placeholder="Disabled" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="a">Option A</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Select,
      SelectContent,
      SelectGroup,
      SelectItem,
      SelectLabel,
      SelectSeparator,
      SelectTrigger,
      SelectValue,
    },
    setup() {
      const country = ref<string>()
      const timezone = ref<string>()
      return { country, timezone }
    },
    template: `
      <div class="space-y-8 w-96">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Simple</h3>
          <Select v-model="country">
            <SelectTrigger><SelectValue placeholder="Country" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="us">United States</SelectItem>
              <SelectItem value="uk">United Kingdom</SelectItem>
              <SelectItem value="de">Germany</SelectItem>
            </SelectContent>
          </Select>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Grouped + separator</h3>
          <Select v-model="timezone">
            <SelectTrigger><SelectValue placeholder="Time zone" /></SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>Americas</SelectLabel>
                <SelectItem value="est">EST (UTC -5)</SelectItem>
                <SelectItem value="pst">PST (UTC -8)</SelectItem>
              </SelectGroup>
              <SelectSeparator />
              <SelectGroup>
                <SelectLabel>Europe</SelectLabel>
                <SelectItem value="gmt">GMT (UTC +0)</SelectItem>
                <SelectItem value="cet">CET (UTC +1)</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </section>
      </div>
    `,
  }),
}
