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

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

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

const Template = (args) => ({
  setup() {
    const curentValue = ref(args.modelValue);
    return { args, curentValue };
  },
  components: {
    BmsInputToggle,
  },
  template: `
    <BmsInputToggle  v-bind="{...args}" v-model="curentValue"/>
    Valeur de mon toggle : {{ curentValue }}
  <br/>
  <BmsInputToggle v-bind="{...args, small:true}" v-model="curentValue"/>
    Valeur de mon toggle : {{ curentValue }}
    `,
});

export const Default = Template.bind({});
Default.args = { label: 'without value', name: 'my-input' };

export const On = Template.bind({});
On.args = { label: 'Label', modelValue: true, name: 'my-input' };

export const Off = Template.bind({});
Off.args = { label: 'Label', modelValue: false, name: 'my-input' };

export const WithHelper = Template.bind({});
WithHelper.args = {
  label: 'Activer les notifications',
  name: 'my-input',
  helperText:
    'Explication du toggle : active ou désactive les notifications par e-mail.',
};

const TemplateOverflow = (args) => ({
  setup() {
    const curentValue = ref(args.modelValue);
    return { args, curentValue };
  },
  components: {
    BmsInputToggle,
  },
  template: `
    <div style="width: 200px; border: 1px solid black;">
      <BmsInputToggle  v-bind="{...args}" v-model="curentValue"/>
    </div>
    `,
});
export const Overflow = TemplateOverflow.bind({});
Overflow.args = {
  label: 'with a very long label that overflows',
  name: 'my-input',
  ellipsisLabel: true,
};
export const NoOverflow = TemplateOverflow.bind({});
NoOverflow.args = {
  label: 'with a very long label that overflows',
  name: 'my-input',
  ellipsisLabel: false,
};
