import React from 'react';
import { RouteComponentProps, useHistory } from 'react-router';
import { FormikProps, withFormik } from 'formik';
import * as Yup from 'yup';
import ShellPopUp from '../components/shell-popup';
import Button from '../components/button';
import Input from '../components/input';
import { DEFAULT_ROUTE } from '../routes/constants';
import { useDispatch } from 'react-redux';
import { ProxyStoreDispatch } from '../../application/redux/proxyStore';

interface SettingsChangePasswordFormValues {
  currentPassword: string;
  newPassword: string;
  confirmNewPassword: string;
}

interface SettingsChangePasswordFormProps {
  dispatch: ProxyStoreDispatch;
  history: RouteComponentProps['history'];
}

const SettingsChangePasswordForm = (props: FormikProps<SettingsChangePasswordFormValues>) => {
  const { handleSubmit, errors, isSubmitting, touched } = props;
  const history = useHistory();
  const handleCancel = () => history.goBack();

  return (
    <form onSubmit={handleSubmit} className="mt-5">
      <Input
        name="currentPassword"
        placeholder="Enter current password"
        title="Current password"
        type="password"
        {...props}
      />
      <Input
        name="newPassword"
        placeholder="Enter new password"
        title="New password"
        type="password"
        {...props}
      />
      <Input
        name="confirmNewPassword"
        placeholder="Confirm new password"
        title="Confirm new password"
        type="password"
        {...props}
      />

      <div className="flex justify-end">
        <div className="pr-1">
          <Button
            isOutline={true}
            onClick={handleCancel}
            className="bg-secondary hover:bg-secondary-light"
          >
            Cancel
          </Button>
        </div>
        <div>
          <Button
            disabled={
              isSubmitting ||
              !!(
                (errors.currentPassword && touched.currentPassword) ||
                (errors.newPassword && touched.newPassword) ||
                (errors.confirmNewPassword && touched.confirmNewPassword)
              )
            }
            type="submit"
          >
            Update
          </Button>
        </div>
      </div>
    </form>
  );
};

const SettingsChangePasswordEnhancedForm = withFormik<
  SettingsChangePasswordFormProps,
  SettingsChangePasswordFormValues
>({
  mapPropsToValues: (): SettingsChangePasswordFormValues => ({
    currentPassword: '',
    newPassword: '',
    confirmNewPassword: '',
  }),

  validationSchema: Yup.object().shape({
    currentPassword: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    newPassword: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    confirmNewPassword: Yup.string()
      .required('Please confirm password')
      .min(8, 'Password is too short - should be 8 chars minimum.')
      .oneOf([Yup.ref('newPassword'), null], 'Passwords must match'),
  }),

  handleSubmit: (values, { props }) => {
    props.history.push(DEFAULT_ROUTE);
  },

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

const SettingsChangePassword: React.FC = () => {
  const history = useHistory();
  const dispatch = useDispatch<ProxyStoreDispatch>();

  return (
    <ShellPopUp
      backgroundImagePath="/assets/images/popup/bg-sm.png"
      className="h-popupContent container pb-20 mx-auto bg-bottom bg-no-repeat"
      currentPage="Change password"
    >
      <SettingsChangePasswordEnhancedForm dispatch={dispatch} history={history} />
    </ShellPopUp>
  );
};

export default SettingsChangePassword;