import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import FdsRadio from './FdsRadio.vue'

const meta: Meta<typeof FdsRadio> = {
  title: 'FDS/Form/FdsRadio',
  component: FdsRadio,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    disabled: { control: 'boolean' },
    name: { control: 'text' },
    value: { control: 'text' },
    id: { control: 'text' },
  },
  args: {
    label: 'Radio label',
    disabled: false,
    name: 'group1',
    value: 'optionA',
    id: undefined,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsRadio },
    setup() {
      const selected = ref(args.value)
      return { args, selected }
    },
    template: `
      <FdsRadio v-bind="args" v-model="selected" />
      <div class="mt-4">Selected: {{ selected }}</div>
    `,
  }),
}

export const Group: Story = {
  render: () => ({
    components: { FdsRadio },
    setup() {
      const selected = ref('a')
      return { selected }
    },
    template: `
      <div class="space-y-2">
        <FdsRadio name="g1" value="a" v-model="selected">Alternative A</FdsRadio>
        <FdsRadio name="g1" value="b" v-model="selected">Alternative B</FdsRadio>
        <FdsRadio name="g1" value="c" v-model="selected">Alternative C</FdsRadio>
        <div>Selected: {{ selected }}</div>
      </div>
    `,
  }),
}