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

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

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['with_useable_code'],
  title: 'Composants/form/InputCheckboxCaption',
  component: BmsInputCheckboxCaption,
};

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

const DEFAULT_CHECKBOXCAPTION_INPUT = {
  label: 'Mon texte',
  options: [],
  required: false,
  disabled: false,
  captions: [],
  errors: [],
};

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

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

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

export const WithCaptionMode = Template.bind({});
WithCaptionMode.args = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 },
  ],
  name: 'myInput',
};

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

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