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

import {
  RadioButton as NychRadioButton,
  RadioButtonGroup as NychRadioButtonGroup,
} from '@nychthemeron/library'

const meta = {
  title: 'Components/RadioButton',
  component: NychRadioButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the radio button',
    },
  },
} satisfies Meta<typeof NychRadioButton>

export default meta
type Story = StoryObj<typeof meta>

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

export const Disabled: Story = {
  render: () => ({
    components: { NychRadioButton },
    setup() {
      const realm = ref('sky')
      return { realm }
    },
    template: `
      <div style="display: flex; gap: 1rem;">
        <NychRadioButton :modelValue="'underworld'" value="sky" disabled />
        <NychRadioButton :modelValue="'sky'" value="sky" disabled />
      </div>
    `,
  }),
}

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

// RadioButtonGroup binds the v-model once on the group and shares a name across
// children — the children only carry a `value`.
export const Group: Story = {
  render: () => ({
    components: { NychRadioButton, NychRadioButtonGroup },
    setup() {
      const god = ref('apollo')
      return { god }
    },
    template: `
      <div style="font-family: var(--font-sans); color: var(--text-body);">
        <NychRadioButtonGroup v-model="god" name="god">
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioButton value="apollo" /> Apollo
          </label>
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioButton value="hades" /> Hades
          </label>
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
            <NychRadioButton value="hermes" /> Hermes
          </label>
        </NychRadioButtonGroup>
        <p style="color: var(--text-muted); margin-top: 0.75rem;">Chosen: {{ god }}</p>
      </div>
    `,
  }),
}