import BmsInputTime from '@/components/form/BmsInputTime.vue';
import { BookOpen, CloudLightning, Mail, Eye } from 'lucide-vue-next';
import template from '@/documentation/template_field_dependency.mdx';
import { ref } from 'vue';

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

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

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

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

export const WithStep = Template.bind({});
WithStep.args = {
  label: 'My label',
  placeholder: 'Placeholder',
  captions: ['There is more information'],
  modelValue: '',
  modelValueSmall: '',
  step: 10, // max 15 (multiple de 60)
};
