import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
import { StatusType } from '@/models/status-type.model';

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

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

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

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

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

export const WithCaptions = Template.bind({});
WithCaptions.args = {
  label: 'My label',
  modelValue: null,
  captions: ['Caption form my label 1', 'Caption form my label 2'],
  value: 'titi',
  name: 'myInput',
};

export const WithCaptionMode = Template.bind({});
WithCaptionMode.args = {
  label: 'My label',
  modelValue: null,
  captions: [
    { label: 'Caption form my label 1', mode: StatusType.Default },
    { label: 'Caption form my label 2', mode: StatusType.Success },
    { label: 'Caption form my label 3', mode: StatusType.Danger },
    { label: 'Caption form my label 4', mode: StatusType.Warning },
  ],
  value: 'titi',
  name: 'myInput',
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: null,
  disabled: true,
  captions: ['Caption form my label 1', 'Caption form my label 2'],
  value: 'titi',
  name: 'myInput',
};

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