import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
import { within } from 'storybook/test';

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

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsInputDateTime,
  },
  template: `
  <BmsInputDateTime v-bind="args" />
  <br/>
  <BmsInputDateTime v-bind="{...args, small:true}"/>
  `,
});

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

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

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'My label',
  modelValue: '2018-06-12T19:30',
};

export const WithStep = Template.bind({});
WithStep.args = {
  label: 'My label',
  modelValue: '2018-06-12T19:30',
  step: 10,
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: '2018-06-12T19:30',
  disabled: true,
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: '2018-06-12T19:30',
  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();
  },
};
