import React from 'react';
import * as Yup from 'yup';
import {SQFormDateTimePicker as SQFormDateTimePickerComponent} from '../src';
import {SQFormStoryWrapper} from './components/SQFormStoryWrapper';
import {createDocsPage} from './utils/createDocsPage';
import markdown from '../notes/SQFormDatePicker.md';
import type {Meta} from '@storybook/react';
import type {CustomStory} from './types/storyHelperTypes';
import type {SQFormDateTimePickerProps} from 'components/SQForm/SQFormDateTimePicker';
import getSizeProp from './utils/getSizeProp';

const meta: Meta = {
  title: 'Components/SQFormDateTimePicker',
  component: SQFormDateTimePickerComponent,
  argTypes: {
    onBlur: {action: 'blurred', table: {disable: true}},
    onChange: {action: 'changed', table: {disable: true}},
    name: {table: {disable: true}},
  },
  parameters: {
    docs: {page: createDocsPage({markdown})},
  },
};

const MOCK_INITIAL_STATE = {
  datetime: '09/22/2020 02:20 PM',
};

const schema = Yup.object({
  datetime: Yup.date()
    .required()
    .min(new Date('2020-09-22'))
    .max(new Date('2100-10-10'))
    .typeError('Invalid date'),
});

const defaultArgs = {
  label: 'Date/Time',
  name: 'datetime',
};

const Template: CustomStory<SQFormDateTimePickerProps> = (args) => {
  const {schema, sqFormProps, ...rest} = args;
  return (
    <SQFormStoryWrapper
      initialValues={MOCK_INITIAL_STATE}
      validationSchema={schema}
      {...sqFormProps}
    >
      <SQFormDateTimePickerComponent {...rest} size={getSizeProp(args.size)} />
    </SQFormStoryWrapper>
  );
};

export const BasicDateTimePicker = Template.bind({});
BasicDateTimePicker.storyName = 'BasicDateTimePicker';
BasicDateTimePicker.args = defaultArgs;

export const WithValidation = Template.bind({});
WithValidation.args = {
  ...defaultArgs,
  schema,
};
WithValidation.parameters = {
  controls: {exclude: 'schema'},
};

export default meta;