import {action} from '@storybook/addon-actions';
import React from 'react';
import * as Yup from 'yup';
import {SQFormAsyncAutocomplete} from '../src';
import getSizeProp from './utils/getSizeProp';
import {createDocsPage} from './utils/createDocsPage';
import {SQFormStoryWrapper} from './components/SQFormStoryWrapper';
import type {Story, Meta} from '@storybook/react';
import type {SQFormAsyncAutocompleteProps} from 'components/SQForm/SQFormAsyncAutocomplete';
import type {GridSizeOptions} from './types/storyHelperTypes';
import type {SQFormStoryWrapperProps} from './components/SQFormStoryWrapper';

type FormProps = {
  initialValues?: SQFormStoryWrapperProps['initialValues'];
} & Omit<SQFormStoryWrapperProps, 'initialValues' | 'children'>;

type SQFormAsyncAutocompleteStory = Story<
  Omit<SQFormAsyncAutocompleteProps, 'size'> & {
    size?: GridSizeOptions;
    sqFormProps?: FormProps;
    schema: SQFormStoryWrapperProps['validationSchema'];
  }
>;

const meta: Meta = {
  title: 'Components/SQFormAsyncAutocomplete',
  component: SQFormAsyncAutocomplete,
  argTypes: {
    onBlur: {action: 'blurred', table: {disable: true}},
    onChange: {action: 'changed', table: {disable: true}},
    onInputChange: {action: 'inputChanged', table: {disable: true}},
    onOpen: {action: 'opened', table: {disable: true}},
    onClose: {action: 'closed', table: {disable: true}},
    name: {table: {disable: true}},
    handleAsyncInputChange: {table: {disable: true}},
  },
  parameters: {
    docs: {
      page: createDocsPage(),
      source: {
        type: 'code',
      },
    },
  },
};

const defaultArgs = {
  name: 'asyncAutocomplete',
  label: 'Async Autocomplete',
  children: [
    {
      label: 'First',
      value: 'first',
    },
    {
      label: 'Second',
      value: 'second',
    },
    {
      label: 'Third',
      value: 'third',
    },
    {
      label: 'Fourth',
      value: 'fourth',
    },
    {
      label: 'Fifth',
      value: 'fifth',
    },
  ],
  handleAsyncInputChange: action('handleAsyncInputChange'),
};

const Template: SQFormAsyncAutocompleteStory = (args) => {
  const {schema, sqFormProps, size, ...rest} = args;
  return (
    <div style={{minWidth: 250}}>
      <SQFormStoryWrapper
        initialValues={{[defaultArgs.name]: ''}}
        validationSchema={schema}
        {...sqFormProps}
      >
        <SQFormAsyncAutocomplete {...rest} size={getSizeProp(size)} />
      </SQFormStoryWrapper>
    </div>
  );
};

export const Default = Template.bind({});
Default.args = defaultArgs;

export const WithValidation = Template.bind({});
WithValidation.args = {
  ...defaultArgs,
  schema: Yup.object({
    [defaultArgs.name]: Yup.string().required(),
  }),
};
WithValidation.parameters = {
  controls: {exclude: 'schema'},
};

export default meta;