import { BookOpen, CloudLightning } from 'lucide-vue-next';
import BmsBetweenInput from './BmsBetweenInput.vue';
import { InputType, StatusType } from '../../models';

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

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsBetweenInput,
    BookOpen,
    CloudLightning,
  },
  template: `
  <BmsBetweenInput v-bind="args" @update:value-from="args.valueFrom = $event" @update:value-to="args.valueTo = $event">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsBetweenInput>
  <template v-if="args.valueFrom && args.valueTo"><br/>Current range : entre <b>{{ args.valueFrom }}</b> et <b>{{ args.valueTo }}</b></template>
  `,
});

const DEFAULT_BEETWEEN_INPUT = {
  inputType: InputType.NUMBER,
  label: 'My label',
  required: false,
  optional: false,
  disabled: false,
  helperText: 'help me !',
  captions: [],
  errors: [],
};

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

export const WithDate = Template.bind({});
WithDate.args = {
  ...DEFAULT_BEETWEEN_INPUT,
  inputType: InputType.DATETIME,
  label: 'My label',
  placeholderFrom: 'Placeholder From',
  placeholderTo: 'Placeholder To',
  captions: [{ label: 'Give some date range', mode: StatusType.Warning }],
};

export const WithBadPresetValueDate = Template.bind({});
WithBadPresetValueDate.args = {
  ...DEFAULT_BEETWEEN_INPUT,
  inputType: InputType.DATETIME,
  label: 'My label',
  placeholderFrom: 'Placeholder From',
  placeholderTo: 'Placeholder To',
  valueFrom: '2024-12-25 12:00',
  valueTo: '2009-06-21 23:50',
  captions: [{ label: 'Give some date range', mode: StatusType.Warning }],
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  ...DEFAULT_BEETWEEN_INPUT,
  label: 'My label',
  placeholderFrom: 'Placeholder From',
  placeholderTo: 'Placeholder To',
  errors: ["That's not good here"],
};
