import React, { useState } from "react";
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";
import Image from "next/image";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";
import { ToastContainer, toast } from "react-toastify";
import { resetPassword } from "../../../services/public";
import Logo from "../pages/Logo";
import Link from "next/link";
import { Form, FormGroup, FormControl, Card, Row, Col } from "react-bootstrap";

interface PasswordResetToken {
  token: string;
  user_type: string;
}

interface FormData {
  reset_token: string;
  user_type: string;
  password: string;
  confirm_password: string;
  username: string;
}

const ResetPasswordForm: React.FC<{
  passwordResetToken: PasswordResetToken;
}> = ({ passwordResetToken }) => {
  const router = useRouter();
  const { register, handleSubmit, formState } = useForm<FormData>({
    resolver: yupResolver(
      object().shape({
        reset_token: string(),
        user_type: string(),
        password: string().required("Please enter a new password."),
        confirm_password: string()
          .required("Please confirm the password.")
          .test(
            "passwords-match",
            "The passwords do not match",
            function (value) {
              return this.parent.password === value;
            },
          ),
        username: string().required("Please enter the  username"),
      }),
    ),
  });

  const { errors } = formState;
  const onSubmit = async (data: FormData) => {
    setButtonDisable(true);
    const responseData = await resetPassword({
      password: data.password,
      reset_token: passwordResetToken.token,
      user_type: passwordResetToken.user_type,
      username: data.username,
      confirm_password: data.confirm_password,
    });
    if (responseData.status === "error" && responseData.statusCode !== 200) {
      toast.error(responseData?.message);
      setButtonDisable(false);
    } else {
      toast.success(responseData?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setTimeout(() => {
        router.push("/login");
      }, 4000);
    }
  };

  const [buttonDisable, setButtonDisable] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  return (
    <Card className="card1 main-div-password">
      <ToastContainer />
      <Row className="justify-content-center my-auto">
        <Col md={10} className="my-3">
          <Logo />
          <h3 className="text-center heading">Reset Password</h3>
          <Form onSubmit={handleSubmit(onSubmit)}>
            <FormControl
              type="hidden"
              {...register("reset_token")}
              value={passwordResetToken.token}
            />
            <FormGroup className="form-group">
              <FormControl
                type={showPassword ? "text" : "password"}
                {...register("password")}
                id="psw"
                autoComplete="off"
                placeholder="Enter new password"
                className={errors.password ? "is-invalid" : ""}
              />
              <span className={`icon_input ${errors.password ? "d-none" : ""}`}>
                <Image
                  className="passwordIcon"
                  onClick={() => setShowPassword(!showPassword)}
                  alt="Newpassword"
                  width={20}
                  height={20}
                  src={
                    showPassword
                      ? "/images/pass.png"
                      : "/images/hidepassword.png"
                  }
                />
              </span>
              <Form.Control.Feedback type="invalid">
                {errors.password?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>

            <FormGroup className="form-group">
              <FormControl
                type={showConfirmPassword ? "text" : "password"}
                {...register("confirm_password")}
                id="confirm_password"
                autoComplete="off"
                placeholder="Confirm your password"
                className={errors.confirm_password ? "is-invalid" : ""}
              />
              <span
                className={`icon_input ${errors.confirm_password ? "d-none" : ""}`}
              >
                <Image
                  className="passwordIcon"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  alt="Confirmpassword"
                  width={20}
                  height={20}
                  src={
                    showConfirmPassword
                      ? "/images/pass.png"
                      : "/images/hidepassword.png"
                  }
                />
              </span>
              <Form.Control.Feedback type="invalid">
                {errors?.confirm_password?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>

            <FormGroup className="form-group">
              <FormControl
                type="text"
                {...register("username")}
                id="username"
                autoComplete="off"
                placeholder="Enter the username"
                className={errors.username ? "is-invalid" : ""}
              />
              <Form.Control.Feedback type="invalid">
                {errors.username?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>

            <Row className="justify-content-center my-3 px-3">
              <button
                type="submit"
                className="btn-block btn-color"
                disabled={buttonDisable}
              >
                {buttonDisable ? (
                  <>
                    <span
                      className="spinner-border spinner-border-sm"
                      role="status"
                      aria-hidden="true"
                    ></span>{" "}
                    Please wait...{" "}
                  </>
                ) : (
                  "UPDATE PASSWORD"
                )}
              </button>
            </Row>
            <Row className="justify-content-center my-3 px-3">
              <div className="bottom text-center">
                <p className="sm-text mx-auto mb-3">
                  <Link href="/login">Back to Login</Link>
                </p>
              </div>
            </Row>
          </Form>
        </Col>
      </Row>
    </Card>
  );
};

export default ResetPasswordForm;