import { yupResolver } from '@hookform/resolvers/yup';
import _ from '@lodash';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Controller, useForm } from 'react-hook-form';
import { withTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import * as yup from 'yup';
import LeftSideCanvas from '../shared-components/LeftSideCanvas';

const defaultValues = {
  email: '',
};

function ForgotPasswordPage({ t }) {
  const schema = yup.object().shape({
    email: yup.string().email(t('email_error')).required(t('email_error')),
  });

  const { control, formState, handleSubmit, reset } = useForm({
    mode: 'onChange',
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { isValid, dirtyFields, errors } = formState;

  function onSubmit() {
    reset(defaultValues);
  }

  return (
    <div className="h-full flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0">
      <LeftSideCanvas title={t('title')} subtitle={t('subtitle')} text={t('text')} />

      <Paper
        className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
        sx={{ background: (theme) => theme.palette.background?.authPaper }}
      >
        <div className="w-full mx-auto sm:mx-0">
          <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
            {t('forgot_password')}
          </Typography>
          <div className="flex items-baseline mt-10 font-medium">
            <Typography>{t('suggestion')}</Typography>
          </div>

          <form
            name="forgotPasswordForm"
            noValidate
            className="flex flex-col justify-center w-full mt-48"
            onSubmit={handleSubmit(onSubmit)}
          >
            <Controller
              name="email"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  label={t('email')}
                  type="email"
                  error={!!errors.email}
                  helperText={errors?.email?.message}
                  variant="outlined"
                  required
                  fullWidth
                  InputProps={{
                    sx: {
                      background: (theme) => theme.palette.background.paper,
                    },
                  }}
                />
              )}
            />

            <div className="flex justify-center w-full">
              <Button
                variant="contained"
                color="secondary"
                className="w-[300px] mt-32 text-base uppercase rounded-xl"
                aria-label="Register"
                disabled={_.isEmpty(dirtyFields) || !isValid}
                type="submit"
                size="large"
              >
                {t('forgot_password_btn')}
              </Button>
            </div>

            <Typography className="mt-32 font-medium" color="text.secondary">
              <span>{t('return')}</span>
              <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
                {t('sign_in')}
              </Link>
            </Typography>
          </form>
        </div>
      </Paper>
    </div>
  );
}

export default withTranslation('forgotPasswordPage')(ForgotPasswordPage);
