import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"

import VRadio from "~/components/VRadio/VRadio.vue"

<Meta
  title="Components/VRadio"
  components={VRadio}
  argTypes={{
    change: {
      action: "change",
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  template: `
    <div>
      <VRadio v-bind="$props" v-on="$props">Label text</VRadio>
    </div>
  `,
  components: { VRadio },
  props: Object.keys(argTypes),
})

# VRadio

<Description of={VRadio} />

<ArgsTable of={VRadio} />

<Canvas>
  <Story
    name="Default"
    args={{
      id: "default",
      value: "value",
      modelValue: "modelValue", // if same as value, radio is checked
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Attributes

The component is a transparent wrapper over `<input>` so all attributes of the
input element can be applied to it, e.g. `disabled`. It is recommended not to
change the type as the field is specifically designed as a radio.

<Canvas>
  <Story
    name="Disabled"
    args={{
      id: "disabled",
      value: "value",
      modelValue: "modelValue", // if same as value, radio is checked
      disabled: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## v-model

The recommended way to use it is with `v-model` mapping to a `String`. Ideally
you would have more than one `VRadio` in a `<form>` with the same `name`
attribute and mapped to the same `v-model` variable.

export const vModelTemplate = (args, { argTypes }) => ({
  template: `
    <div>
      <form class="flex flex-col gap-2 mb-2">
        <VRadio id="a" name="test" value="A" v-model="picked">A</VRadio>
        <VRadio id="b" name="test" value="B" v-model="picked">B</VRadio>
      </form>
      {{ picked ?? 'None' }}
    </div>
  `,
  data() {
    return { picked: null }
  },
  components: { VRadio },
  props: Object.keys(argTypes),
})

<Canvas>
  <Story name="v-model">{vModelTemplate.bind({})}</Story>
</Canvas>
