import { useHistory } from 'react-router-dom';
import { FormikProps, withFormik } from 'formik';
import * as Yup from 'yup';
import cx from 'classnames';
import React from 'react';
import Button from '../components/button';
import { SETTINGS_TERMS_ROUTE } from '../routes/constants';

const OpenTerms: React.FC = () => {
  const history = useHistory();

  const handleClick = (e: any) => {
    e.preventDefault();

    history.push({
      pathname: SETTINGS_TERMS_ROUTE,
      state: { isFullScreen: true },
    });
  };

  return (
    /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
    <a className="text-primary" href="#" onClick={handleClick}>
      terms of service
    </a>
  );
};

interface OnboardingFormValues {
  password: string;
  confirmPassword: string;
  makeSecurityAccount: boolean;
  acceptTerms: boolean;
}

const OnboardingFormView = (props: FormikProps<OnboardingFormValues>) => {
  const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props;

  return (
    <form onSubmit={handleSubmit} className="mt-10">
      <div className={cx({ 'mb-12': !errors.password || !touched.password })}>
        <label className="block">
          <p className="mb-2 font-medium">Create password</p>
          <input
            className={cx(
              'border-2 focus:ring-primary focus:border-primary placeholder-grayLight block w-3/5 rounded-md',
              {
                'border-red': errors.password && touched.password,
                'border-grayLight': !errors.password,
              }
            )}
            id="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Enter your password"
            type="password"
            value={values.password}
          />
        </label>
        {errors.password && touched.password && (
          <p className="text-red h-10 mt-2 text-xs">{errors.password}</p>
        )}
      </div>

      <div className={cx({ 'mb-12': !errors.confirmPassword || !touched.confirmPassword })}>
        <label className="block">
          <p className="mb-2 font-medium">Confirm password</p>
          <input
            className={cx(
              'border-2 focus:ring-primary focus:border-primary placeholder-grayLight block w-3/5 rounded-md',
              {
                'border-red': errors.confirmPassword && touched.confirmPassword,
                'border-grayLight': !errors.confirmPassword,
              }
            )}
            id="confirmPassword"
            name="confirmPassword"
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Confirm your password"
            type="password"
            value={values.confirmPassword}
          />
        </label>
        {errors.confirmPassword && touched.confirmPassword && (
          <p className="text-red h-10 mt-2 text-xs">{errors.confirmPassword}</p>
        )}
      </div>

      <div className={cx({ 'mb-12': !errors.acceptTerms || !touched.acceptTerms })}>
        <label htmlFor="acceptTerms" className="text-grayLight block text-base">
          <input
            className="focus:ring-primary text-primary border-grayLight w-4 h-4 mr-2 text-base rounded"
            checked={values.acceptTerms}
            id="acceptTerms"
            name="acceptTerms"
            onChange={handleChange}
            onBlur={handleBlur}
            type="checkbox"
          />
          {'I’ve read and accept the '}
          <OpenTerms />
        </label>
        {errors.acceptTerms && touched.acceptTerms && (
          <p className="text-red h-10 mt-2 text-xs">{errors.acceptTerms}</p>
        )}
      </div>

      <Button className="w-3/5 text-base" disabled={isSubmitting} type="submit">
        Create
      </Button>
    </form>
  );
};

interface OnboardingFormProps {
  onSubmit: (values: { password: string; makeSecurityAccount: boolean }) => Promise<void>;
}

const OnboardingForm = withFormik<OnboardingFormProps, OnboardingFormValues>({
  mapPropsToValues: (): OnboardingFormValues => ({
    confirmPassword: '',
    password: '',
    acceptTerms: false,
    makeSecurityAccount: false,
  }),

  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    confirmPassword: Yup.string()
      .required('Please confirm password')
      .min(8, 'Password is too short - should be 8 chars minimum.')
      .oneOf([Yup.ref('password'), null], 'Passwords must match'),
    acceptTerms: Yup.bool().oneOf([true], 'Accepting Terms & Conditions is required'),
  }),

  handleSubmit: (values, { props }) => {
    props.onSubmit(values).catch(console.error);
  },

  displayName: 'WalletCreateForm',
})(OnboardingFormView);

export default OnboardingForm;