import BmsInputRadio from '@/components/form/BmsInputRadio.vue';

import template from '@/documentation/template_field_dependency.mdx';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  title: 'Composants/form/InputRadio',
  component: BmsInputRadio,
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsInputRadio,
  },
  template: `
                <div>
                  <BmsInputRadio v-bind="args">
                      <template v-if="args.labelSlot" #label>
                        <span v-html='args.labelSlot' />
                      </template>
                  </BmsInputRadio>
              </div>
              <div>
                  <BmsInputRadio v-bind="{...args, modelValue: 'titi'}">
                      <template v-if="args.labelSlot" #label>
                        <span v-html='args.labelSlot' />
                      </template>
                  </BmsInputRadio>
              </div>
             `,
});

export const Default = Template.bind({});
Default.args = {
  modelValue: null,
  value: 'titi',
  name: 'myInput',
};

export const WithLabel = Template.bind({});
WithLabel.args = {
  label: 'My label',
  modelValue: null,
  value: 'titi',
  name: 'myInput',
};

export const WithLabelAsSlot = Template.bind({});
WithLabelAsSlot.args = {
  modelValue: null,
  labelSlot: '<strong>This is a slotted label</strong>',
  value: 'titi',
  name: 'myInput',
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: null,
  disabled: true,
  value: 'titi',
  name: 'myInput',
};

export const Error = Template.bind({});
Error.args = {
  label: 'My label',
  modelValue: null,
  errors: ['Error 1', 'Error 2'],
  value: 'titi',
  name: 'myInput',
};
