import UiBmsInputCheckbox from '@/components/form/UiBmsInputCheckbox.vue';
import { ref } from 'vue';

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

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/form/UiBmsInputCheckbox',
  component: UiBmsInputCheckbox,
};

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

      <br/>
      <div>
      <UiBmsInputCheckbox v-bind="{...args, small:true}" v-model="curentValue">
          <template v-if="args.labelSlot" #label>
            <span v-html='args.labelSlot'/>
          </template>
        </UiBmsInputCheckbox>
        Valeur de mon champ : {{ curentValue }}
      </div>
    `,
});

export const Default = Template.bind({});
Default.args = {
  modelValue: true,
  name: 'myCheckboxName',
};

export const WithNotBooleanValue = Template.bind({});
WithNotBooleanValue.args = {
  modelValue: false,
  value: 'Super!',
  name: 'myCheckboxName',
};

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

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

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

export const Error = Template.bind({});
Error.args = {
  name: 'myCheckboxName',
  label: 'My label',
  modelValue: false,
  error: true,
};
