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

import { RadioGroup as NychRadioGroup, RadioGroupItem as NychRadioGroupItem } from '@nychthemeron/library'

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychRadioGroup, NychRadioGroupItem },
    setup() {
      const realm = ref('underworld')
      return { realm }
    },
    template: `
      <NychRadioGroup v-model="realm" style="display: flex; flex-direction: row; gap: 1rem;">
        <NychRadioGroupItem value="underworld" />
        <NychRadioGroupItem value="sky" />
      </NychRadioGroup>
    `,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychRadioGroup, NychRadioGroupItem },
    template: `
      <NychRadioGroup model-value="sky" disabled style="display: flex; flex-direction: row; gap: 1rem;">
        <NychRadioGroupItem value="underworld" />
        <NychRadioGroupItem value="sky" />
      </NychRadioGroup>
    `,
  }),
}

export const WithLabels: Story = {
  render: () => ({
    components: { NychRadioGroup, NychRadioGroupItem },
    setup() {
      const god = ref('apollo')
      return { god }
    },
    template: `
      <div style="font-family: var(--font-serif); color: var(--text-body);">
        <NychRadioGroup v-model="god">
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioGroupItem value="apollo" /> Apollo
          </label>
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioGroupItem value="hades" /> Hades
          </label>
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioGroupItem value="hermes" /> Hermes
          </label>
        </NychRadioGroup>
        <p style="color: var(--text-muted); margin-top: 0.75rem;">Chosen: {{ god }}</p>
      </div>
    `,
  }),
}