import type { Meta, StoryObj } from '@storybook/vue3';
import { action } from '@storybook/addon-actions';

import MRadioGroup from './MRadioGroup.vue';

const meta: Meta<typeof MRadioGroup> = {
  title: 'Form Elements/Radio Group',
  component: MRadioGroup,
  parameters: {
    docs: {
      description: {
        component:
          'A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#radio-group).',
      },
    },
  },
  args: {
    name: 'radioGroupName',
    modelValue: 'radio2',
    options: [
      {
        id: 'radio-01',
        label: 'Radio button Label',
        value: 'radio1',
      },
      {
        id: 'radio-02',
        label: 'Radio button Label',
        value: 'radio2',
      },
      {
        id: 'radio-03',
        label: 'Radio button Label',
        value: 'radio3',
      },
      {
        id: 'radio-04',
        label: 'Radio button Label',
        value: 'radio4',
      },
    ],
  },
  render: (args) => ({
    components: { MRadioGroup },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MRadioGroup 
        v-bind="args"
        @update:modelValue="handleUpdate"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MRadioGroup>;

export const Default: Story = {};