import React from 'react';
import {Story, Meta} from '@storybook/react';
import {Card} from '@material-ui/core';
import {SQFormReadOnly as SQFormReadOnlyComponent, MASKS} from '../src';
import type {
  SQFormReadOnlyProps,
  SQFormMaskedReadOnlyFieldWithKey,
} from '../src';
import type {GridSizeOptions} from './types/storyHelperTypes';

const MOCK_INITIAL_VALUES = {
  firstName: 'Jane',
  lastName: 'Doe',
  preferredName: '',
  email: '',
  birthDate: '01-01-1960',
  gender: 'Female',
  address1: '',
  address2: '',
  city: '',
  zip: 66202,
  state: 'Kansas',
  county: 'Johnson',
};

const readOnlyFields: SQFormMaskedReadOnlyFieldWithKey[] = [
  {
    label: 'First Name',
    name: 'firstName',
    size: 2,
  },
  {
    label: 'Last Name',
    name: 'lastName',
    size: 2,
  },
  {
    label: 'Preferred Name',
    name: 'preferredName',
    size: 2,
  },
  {
    label: 'Email',
    name: 'email',
    size: 2,
  },
  {
    label: 'Birthday',
    name: 'birthDate',
    size: 2,
    mask: MASKS.date,
  },
  {
    label: 'Gender',
    name: 'gender',
    size: 2,
  },
  {
    label: 'Residential Address Line 1',
    name: 'address1',
    size: 2,
  },
  {
    label: 'Residential Address Line 2',
    name: 'address2',
    size: 2,
  },
  {
    label: 'City',
    name: 'city',
    size: 2,
  },
  {
    label: 'Zip',
    name: 'zip',
    size: 2,
  },
  {
    label: 'State',
    name: 'state',
    size: 2,
  },
  {
    label: 'County',
    name: 'county',
    size: 2,
  },
];

type SQFormReadOnlyStory = Story<
  Omit<SQFormReadOnlyProps<typeof MOCK_INITIAL_VALUES>, 'size'> & {
    size?: GridSizeOptions;
  }
>;

const meta: Meta = {
  title: 'forms/SQFormReadOnly',
  component: SQFormReadOnlyComponent,
  argTypes: {
    name: {table: {disable: true}},
  },
};

const defaultArgs = {
  initialValues: MOCK_INITIAL_VALUES,
  readOnlyFields,
};

const Template: SQFormReadOnlyStory = (args): JSX.Element => {
  return (
    <Card raised style={{padding: 20, width: 1200}}>
      <SQFormReadOnlyComponent {...args} />
    </Card>
  );
};

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

export default meta;