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

import MCheckboxGroup from './MCheckboxGroup.vue';

const meta: Meta<typeof MCheckboxGroup> = {
  title: 'Form Elements/Checkbox Group',
  component: MCheckboxGroup,
  parameters: {
    docs: {
      description: {
        component:
          'A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.<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 section](/docs/form-elements-field--docs#input).',
      },
    },
  },
  args: {
    name: 'checkboxGroupName',
    modelValue: ['checkbox2'],
    options: [
      {
        id: 'checkbox-01',
        label: 'checkbox Label',
        value: 'checkbox1',
      },
      {
        id: 'checkbox-02',
        label: 'checkbox Label',
        value: 'checkbox2',
      },
      {
        id: 'checkbox-03',
        label: 'checkbox Label',
        value: 'checkbox3',
      },
      {
        id: 'checkbox-04',
        label: 'checkbox Label',
        value: 'checkbox4',
      },
    ],
  },
  render: (args) => ({
    components: { MCheckboxGroup },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};