import { FormikProps, withFormik } from 'formik';
import React from 'react';
import * as Yup from 'yup';
import Button from './button';
import Input from './input';
import Modal from './modal';
import { DebouncedFunc } from 'lodash';

interface ModalUnlockFormValues {
  handleModalUnlockClose(): void;
  password: string;
}

interface ModalUnlockFormProps {
  handleModalUnlockClose(): void;
  handleUnlock: DebouncedFunc<(password: string) => Promise<void>>;
  isModalUnlockOpen: boolean;
}

const ModalUnlockForm = (props: FormikProps<ModalUnlockFormValues>) => {
  const { handleSubmit, values, isSubmitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <h2 className="mt-4 text-2xl font-medium text-center">Unlock</h2>
        <p className="mt-10 mb-5 text-base text-left">Enter your password to unlock your wallet</p>
        <Input name="password" placeholder="Password" type="password" {...props} />
      </div>
      <div className="bottom-10 right-8 absolute flex justify-end">
        <div className="pr-1">
          <Button
            isOutline={true}
            onClick={() => values.handleModalUnlockClose()}
            className="bg-secondary hover:bg-secondary-light"
          >
            Cancel
          </Button>
        </div>
        <div>
          <Button type="submit" disabled={isSubmitting}>
            {!isSubmitting ? `Unlock` : `Please wait...`}
          </Button>
        </div>
      </div>
    </form>
  );
};

const ModalUnlockEnhancedForm = withFormik<ModalUnlockFormProps, ModalUnlockFormValues>({
  mapPropsToValues: (props): ModalUnlockFormValues => ({
    handleModalUnlockClose: props.handleModalUnlockClose.bind(this),
    password: '',
  }),

  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('A password is required')
      .min(8, 'Password should be 8 characters minimum'),
  }),

  handleSubmit: async (values, { props }) => {
    return await props.handleUnlock(values.password);
  },

  displayName: 'ModalUnlockForm',
})(ModalUnlockForm);

const ModalUnlock: React.FC<ModalUnlockFormProps> = ({
  handleModalUnlockClose,
  handleUnlock,
  isModalUnlockOpen,
}) => {
  if (!isModalUnlockOpen) {
    return <></>;
  }

  return (
    <Modal isOpen={isModalUnlockOpen} onClose={handleModalUnlockClose}>
      <ModalUnlockEnhancedForm
        isModalUnlockOpen={isModalUnlockOpen}
        handleModalUnlockClose={handleModalUnlockClose}
        handleUnlock={handleUnlock}
      />
    </Modal>
  );
};

export default ModalUnlock;