import * as React from 'react';
import { Meta, Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { Form, Formik } from 'formik';
import MuiGrid from '@mui/material/Grid';

import { Button } from '../button';
import {
  Input,
  InputLabel,
  FormHelperText,
  LabelWithHint,
  Select,
  Switch,
  Textarea,
  ToggleButton,
  ToggleButtonGroup
} from './index';
import type { TextFieldProps } from './index';

export default {
  title: 'Forms/Form Demo',
  argTypes: {
    color: {
      options: ['primary', 'secondary'],
      control: { type: 'select' }
    },
    size: {
      options: ['medium', 'small'],
      control: { type: 'radio' }
    }
  }
} as Meta;

const handleFormSubmit = action('form submit');

const integrationsFormValues = {
  accessKeyId: 'MOCK7T6LOREM7GP3L53M',
  secretAccessKey: 'iPsum2nWhjLw5V',
  protocol: 'https',
  verifyCertificate: true,
  workspaceKey: '',
  bucketRegion: null
};

const IntegrationsTemplate: Story = args => (
  <Formik initialValues={integrationsFormValues} onSubmit={handleFormSubmit}>
    {formikProps => {
      const { values, setFieldValue, submitForm, resetForm } = formikProps;

      return (
        <Form>
          <MuiGrid container direction="row" spacing={3}>
            {/* TEXT INPUT */}
            <MuiGrid item xs={6}>
              <InputLabel>
                <LabelWithHint
                  required
                  tooltipText="Create an IAM user and grant it access to the Bucket. Copy and paste its Access Key ID."
                >
                  Access Key ID
                </LabelWithHint>
                <Input
                  aria-describedby="accessKeyId-helperText"
                  name="accessKeyId"
                  autoFocus
                  error={!values.accessKeyId}
                  placeholder="Enter Access Key ID"
                  value={values.accessKeyId}
                  onChange={e => setFieldValue('accessKeyId', e.target.value)}
                  {...args}
                />
              </InputLabel>
              <FormHelperText id="accessKeyId-helperText" error>
                {!values.accessKeyId ? 'This field is required' : ' '}
              </FormHelperText>
            </MuiGrid>

            {/* PASSWORD */}
            <MuiGrid item xs={6}>
              <InputLabel>
                <LabelWithHint
                  required
                  tooltipText="Create an IAM user and grant it access to the Bucket. Copy and paste its Secret Access Key."
                >
                  Secret Access Key
                </LabelWithHint>
                <Input
                  aria-describedby="secretAccessKey-helperText"
                  name="secretAccessKey"
                  autoComplete="off"
                  error={!values.secretAccessKey}
                  placeholder="Enter your Amazon S3 secret access key"
                  toggleShowPassword
                  value={values.secretAccessKey}
                  onChange={e => setFieldValue('secretAccessKey', e.target.value)}
                  {...args}
                />
              </InputLabel>
              <FormHelperText id="secretAccessKey-helperText" error>
                {!values.secretAccessKey ? 'This field is required' : ' '}
              </FormHelperText>
            </MuiGrid>
          </MuiGrid>

          {/* TOGGLE BUTTON GROUP */}
          <MuiGrid mt={1}>
            <InputLabel>
              <LabelWithHint
                required
                tooltipText="Hypertext Transfer Protocol Secure (HTTPS) is a protocol that secures communication and data transfer."
              >
                Select Protocol
              </LabelWithHint>
              <ToggleButtonGroup
                value={values.protocol}
                onChange={(e, value) => value && setFieldValue('protocol', value)}
              >
                <ToggleButton value="https">HTTPS</ToggleButton>
                <ToggleButton value="http">HTTP</ToggleButton>
              </ToggleButtonGroup>
            </InputLabel>
          </MuiGrid>

          {/* SWITCH */}
          <MuiGrid mt={4}>
            <MuiGrid item xs zeroMinWidth>
              <Switch
                checked={values.verifyCertificate}
                label={
                  <LabelWithHint tooltipText="Enables verification of the server SSL certificate">
                    Verify server SSL certificate
                  </LabelWithHint>
                }
                labelProps={{
                  labelPlacement: 'end'
                }}
                row
                onChange={e => setFieldValue('verifyCertificate', !values.verifyCertificate)}
              />
            </MuiGrid>
          </MuiGrid>

          {/* TEXTAREA */}
          <MuiGrid mt={3}>
            <InputLabel>
              <LabelWithHint required>Workspace Key</LabelWithHint>
              <Textarea
                aria-describedby="workspaceKey-helperText"
                name="workspaceKey"
                error={!values.workspaceKey}
                placeholder="Enter your Microsoft Sentinel key"
                rows={2}
                value={values.workspaceKey}
                onChange={e => setFieldValue('workspaceKey', e.target.value)}
                {...args}
              />
              <FormHelperText id="workspaceKey-helperText" error>
                {!values.workspaceKey ? 'This field is required' : ' '}
              </FormHelperText>
            </InputLabel>
          </MuiGrid>

          {/* SELECT */}
          <MuiGrid mt={1}>
            <Select
              aria-describedby="bucketRegion-helperText"
              name="bucketRegion"
              error={!values.bucketRegion}
              label={
                <LabelWithHint required tooltipText="The region your Bucket was created in">
                  Bucket Region
                </LabelWithHint>
              }
              placeholder="Select bucket region"
              showSelectClearButton
              value={values.bucketRegion}
              menuContentProps={{
                listItems: [
                  {
                    name: 'Africa (Cape Town) af-south-1',
                    value: 'af-south-1'
                  },
                  {
                    name: 'Asia Pacific (Hong Kong) ap-east-1',
                    value: 'ap-east-1'
                  },
                  {
                    name: 'US East (Ohio) us-east-2',
                    value: 'us-east-2'
                  }
                ],
                clearSelectItems: () => setFieldValue('bucketRegion', null),
                handleClick: (name, value) => () => {
                  setFieldValue('bucketRegion', value);
                }
              }}
              {...args}
            />
            <FormHelperText id="bucketRegion-helperText" error>
              {!values.bucketRegion ? 'This field is required' : ' '}
            </FormHelperText>
          </MuiGrid>

          <MuiGrid container direction="row" justifyContent="flex-end" spacing={2} mt={1}>
            <MuiGrid item>
              <Button color="third" onClick={() => resetForm({})}>
                Cancel
              </Button>
            </MuiGrid>
            <MuiGrid item>
              <Button type="submit" onClick={() => submitForm()}>
                Validate
              </Button>
            </MuiGrid>
          </MuiGrid>
        </Form>
      );
    }}
  </Formik>
);

export const Integrations = IntegrationsTemplate.bind({});
Integrations.args = {
  color: 'primary',
  disabled: false,
  readOnly: false,
  size: 'medium'
} as TextFieldProps;