import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
import template from '@/documentation/template_field_dependency.mdx';

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsMultiSelect,
  },
  template: `
    <div style="display:flex;gap:1em;">
      <BmsMultiSelect v-bind="args"/>
      <BmsMultiSelect v-bind="{...args, small:true}"/>
    </div>
    `,
});

export const Default = Template.bind({});
Default.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: null,
  options: [
    { label: 'optionA', value: 'a' },
    { label: 'optionB', value: 'b' },
  ],
};

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'My label',
  modelValue: ['a'],
  options: [
    { label: 'optionA', value: 'a' },
    { label: 'optionB', value: 'b' },
  ],
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: ['a'],
  options: [
    { label: 'optionA', value: 'a' },
    { label: 'optionB', value: 'b' },
  ],
  disabled: true,
};

export const Opened = Template.bind({});
Opened.args = {
  label: 'My label',
  modelValue: null,
  options: [
    { label: 'optionA', value: 'a' },
    { label: 'optionB', value: 'b' },
  ],
  open: true,
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: null,
  options: [
    { label: 'optionA', value: 'a' },
    { label: 'optionB', value: 'b' },
  ],
  errors: ['error 1', 'error 2'],
};

export const WithIncorrectValue = Template.bind({});
WithIncorrectValue.args = {
  label: 'My label',
  modelValue: ['a'],
  options: [
    { label: 'optionB', value: 'b' },
    { label: 'optionC', value: 'c' },
  ],
};
