import { CircularProgress } from '@mui/material'
import { Field, Form, Formik } from 'formik'
import _identity from 'lodash/identity'
import React from 'react'

import { requiredValidator } from '../../validators'
import { CheckboxField, SelectField } from '../common'
import { CustomField } from '../common/CustomField'
import { getValidateFunctions } from '../common/FieldSection/utils'

export interface IIssueTicketForm {
  classNamePrefix?: string;
  handleSubmit: (values: any, resetForm: any) => void;
  selectTicketTypeOptions: Array<any>;
  initialValues?: any;
}

const IssueTicketForm = ({
  classNamePrefix = 'delegations',
  handleSubmit = _identity,
  selectTicketTypeOptions,
  initialValues,
}: IIssueTicketForm) => (
  <div className={`${classNamePrefix}-issue-form`}>
    <Formik
      initialValues={initialValues}
      onSubmit={(values, { resetForm, setSubmitting }) => {
        delete values.confirm
        handleSubmit(values, { resetForm, setSubmitting })
      }}
    >
      {({ isValid, values, isSubmitting }) => (
        <Form>
          <div className="body">
            <div className="field-item">
              <div className="field_label">Ticket Type</div>
              <Field
                name="ticketTypeId"
                label="Ticket Type"
                component={SelectField}
                validate={requiredValidator}
                options={selectTicketTypeOptions}
              />
            </div>
            <div className="field-item">
              <div className="field_label">Name</div>
              <Field
                name="firstName"
                label="Name"
                component={CustomField}
                validate={requiredValidator}
              />
            </div>
            <div className="field-item">
              <div className="field_label">Last Name</div>
              <Field
                name="lastName"
                label="Last Name"
                component={CustomField}
                validate={requiredValidator}
              />
            </div>
            <div className="field-item">
              <div className="field_label">Email</div>
              <Field
                name="email"
                label="Email"
                component={CustomField}
                validate={requiredValidator}
              />
            </div>
            <div className="field-item">
              <div className="field_label">Confirm Email</div>
              <Field
                name="confirmEmail"
                label="Confirm Email"
                component={CustomField}
                validate={getValidateFunctions({
                  element: {
                    name: 'confirmEmail',
                    label: 'Confirm Email',
                    required: true,
                  },
                  values,
                })}
              />
            </div>
          </div>
          <div className="field-item checkbox_item">
            <Field
              name="confirm"
              label="I agree to ManaCommon's privacy policy"
              type="checkbox"
              validate={requiredValidator}
              component={CheckboxField}
            />
          </div>
          <div className="action-button">
            <button type="submit" disabled={!isValid}>
              {isSubmitting ? <CircularProgress size="22px" /> : 'Issue Ticket'}
            </button>
          </div>
        </Form>
      )}
    </Formik>
  </div>
)

export default IssueTicketForm