import React from 'react';
import {Grid} from '@material-ui/core';
import type {Meta} from '@storybook/react';
import type {CustomStory} from './types/storyHelperTypes';
import type {SQFormResetInitialValuesButtonProps} from 'components/SQForm/SQFormResetInitialValuesButton';

import {
  SQFormResetInitialValuesButton as SQFormResetInitialValuesButtonComponent,
  SQFormTextField,
} from '../src';
import {SQFormStoryWrapper} from './components/SQFormStoryWrapper';
import {createDocsPage} from './utils/createDocsPage';

const meta: Meta = {
  title: 'Components/SQFormResetInitialValuesButton',
  component: SQFormResetInitialValuesButtonComponent,
  parameters: {
    docs: {
      page: createDocsPage(),
    },
  },
};

const initialValues = {test: '👁 👄 👁 👍'};

const defaultArgs = {
  initialValuesObject: initialValues,
  children: 'Reset',
  confirmationContent: (
    <img
      src="https://media.giphy.com/media/oGO1MPNUVbbk4/giphy.gif"
      alt="good job"
    />
  ),
};

const Template: CustomStory<SQFormResetInitialValuesButtonProps> = (args) => {
  const {sqFormProps, ...rest} = args;
  return (
    <SQFormStoryWrapper
      initialValues={initialValues}
      showSubmit={false}
      {...sqFormProps}
    >
      <Grid container alignItems="center" spacing={2}>
        <Grid item>
          <SQFormTextField name="test" label="Test Field" />
        </Grid>
        <Grid item>
          <SQFormResetInitialValuesButtonComponent {...rest} />
        </Grid>
      </Grid>
    </SQFormStoryWrapper>
  );
};

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

export default meta;