import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import {
  Select as NychSelect,
  SelectTrigger as NychSelectTrigger,
  SelectValue as NychSelectValue,
  SelectContent as NychSelectContent,
  SelectItem as NychSelectItem,
} from '@nychthemeron/library'

const meta = {
  title: 'Components/Select',
  component: NychSelect,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof NychSelect>

export default meta
type Story = StoryObj<typeof meta>

const RIVERS = ['Styx', 'Acheron', 'Cocytus', 'Phlegethon', 'Lethe']

export const Default: Story = {
  render: () => ({
    components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
    setup() {
      const river = ref<string>()
      return { river, RIVERS }
    },
    template: `
      <NychSelect v-model="river">
        <NychSelectTrigger style="width: 14rem;">
          <NychSelectValue placeholder="Choose a river" />
        </NychSelectTrigger>
        <NychSelectContent>
          <NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
        </NychSelectContent>
      </NychSelect>
    `,
  }),
}

export const Selected: Story = {
  render: () => ({
    components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
    setup() {
      const river = ref('Lethe')
      return { river, RIVERS }
    },
    template: `
      <NychSelect v-model="river">
        <NychSelectTrigger style="width: 14rem;">
          <NychSelectValue placeholder="Choose a river" />
        </NychSelectTrigger>
        <NychSelectContent>
          <NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
        </NychSelectContent>
      </NychSelect>
    `,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
    template: `
      <NychSelect model-value="Styx" disabled>
        <NychSelectTrigger style="width: 14rem;">
          <NychSelectValue placeholder="Choose a river" />
        </NychSelectTrigger>
        <NychSelectContent>
          <NychSelectItem v-for="r in RIVERS" :key="r" :value="r">{{ r }}</NychSelectItem>
        </NychSelectContent>
      </NychSelect>
    `,
  }),
}

export const ObjectOptions: Story = {
  render: () => ({
    components: { NychSelect, NychSelectTrigger, NychSelectValue, NychSelectContent, NychSelectItem },
    setup() {
      const god = ref<string>()
      const gods = [
        { name: 'Apollo', domain: 'apollo' },
        { name: 'Hades', domain: 'hades' },
        { name: 'Hermes', domain: 'hermes' },
      ]
      return { god, gods }
    },
    template: `
      <NychSelect v-model="god">
        <NychSelectTrigger style="width: 14rem;">
          <NychSelectValue placeholder="Choose a god" />
        </NychSelectTrigger>
        <NychSelectContent>
          <NychSelectItem v-for="g in gods" :key="g.domain" :value="g.domain">{{ g.name }}</NychSelectItem>
        </NychSelectContent>
      </NychSelect>
    `,
  }),
}