import BmsInputNumber from '@/components/form/BmsInputNumber.vue';
import { within } from 'storybook/test';
import { BookOpen, CloudLightning } from 'lucide-vue-next';

import template from '@/documentation/template_field_dependency.mdx';
import { ref } from 'vue';

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

const Template = (args) => ({
  setup() {
    const modelValue = ref(args.modelValue);
    const modelValueSmall = ref(args.modelValueSmall);
    return { args, modelValue, modelValueSmall };
  },
  components: {
    BmsInputNumber,
    BookOpen,
    CloudLightning,
  },
  template: `
  <BmsInputNumber v-bind="args" v-model="modelValue">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsInputNumber>
  <br/>
  <BmsInputNumber v-bind="{...args, small:true}" v-model="modelValueSmall">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsInputNumber>
  `,
});

export const Default = Template.bind({});
Default.args = {
  label: 'My label',
  placeholder: 'Placeholder',
  captions: ['There is more information'],
};

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'My label',
  modelValue: 10,
  modelValueSmall: 10,
};

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

export const WithIcons = Template.bind({});
WithIcons.args = {
  label: 'My label',
  modelValue: 10,
  modelValueSmall: 10,
  iconStart: true,
  iconEnd: true,
};

export const WithLimitAndEmptyValue = Template.bind({});
WithLimitAndEmptyValue.args = {
  label: 'My label',
  modelValue: null,
  modelValueSmall: undefined,
  min: 5,
  max: 8,
  errors: [],
};

export const WithStep = Template.bind({});
WithStep.args = {
  label: 'My label',
  modelValue: 10,
  modelValueSmall: 10,
  step: 10,
};

export const WithLimitExceeded = Template.bind({});
WithLimitExceeded.args = {
  label: 'My label',
  modelValue: 0,
  modelValueSmall: 2,
  min: 1,
  max: 8,
  errors: [{ label: 'Error 1' }],
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: 10,
  modelValueSmall: 10,
  errors: ['Error 1', 'Error 2'],
};

export const WithFocusState = {
  args: {
    modelValue: '',
  },

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await canvas.getByRole('input').click();
    await canvas.getByRole('input').focus();
  },
};
