import BmsInputBooleanCheckbox from '@/components/form/BmsInputBooleanCheckbox.vue';
import { ref } from 'vue';
import { StatusType } from '@/models';

import template from '@/documentation/template_field_dependency.mdx';
import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';

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

const Template = (args) => ({
  setup() {
    const curentValue = ref(args.modelValue);
    return { args, curentValue };
  },
  components: {
    BmsInputBooleanCheckbox,
  },
  template: `
      <div>
        <BmsInputBooleanCheckbox v-bind="{...args}" v-model="curentValue">
          <template v-if="args.labelSlot" #label>
            <span v-html='args.labelSlot'/>
          </template>
        </BmsInputBooleanCheckbox>
        Valeur de mon champ : {{ curentValue }}
        <br/>
        <BmsInputBooleanCheckbox v-bind="{...args, small:true}" v-model="curentValue">
          <template v-if="args.labelSlot" #label>
            <span v-html='args.labelSlot'/>
          </template>
        </BmsInputBooleanCheckbox>  
      </div>
    `,
});

export const Default = Template.bind({});
Default.args = {
  ...DEFAULT_FIELD_INPUT,
  labelValue: 'check me !',
  name: 'myCheckboxName',
};

export const WithNotBooleanModelValue = Template.bind({});
WithNotBooleanModelValue.args = {
  ...DEFAULT_FIELD_INPUT,
  modelValue: 'COCHEEEEEEEE',
  labelValue: 'check me !',
  name: 'myCheckboxName',
};

export const DefaultWithCheckedValue = Template.bind({});
DefaultWithCheckedValue.args = {
  ...DEFAULT_FIELD_INPUT,
  modelValue: true,
  labelValue: 'check me !',
  name: 'myCheckboxName',
};

export const WithLabel = Template.bind({});
WithLabel.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My label',
  labelValue: 'check me !',
  modelValue: false,
  name: 'myCheckboxName',
};

export const WithLabelAsSlot = Template.bind({});
WithLabelAsSlot.args = {
  ...DEFAULT_FIELD_INPUT,
  name: 'myCheckboxName',
  labelValue: 'check me !',
  modelValue: false,
  labelSlot: '<strong>This is a slotted label</strong>',
};

export const Disabled = Template.bind({});
Disabled.args = {
  ...DEFAULT_FIELD_INPUT,
  name: 'myCheckboxName',
  labelValue: 'check me !',
  label: 'My label',
  modelValue: false,
  disabled: true,
};

export const Error = Template.bind({});
Error.args = {
  ...DEFAULT_FIELD_INPUT,
  name: 'myCheckboxName',
  labelValue: 'check me !',
  label: 'My label',
  modelValue: false,
  captions: [{ label: 'moyen bien', mode: StatusType.Warning }],
  errors: ['oups ! ', { label: 'pas bien', mode: StatusType.Warning }],
};
