import React, { useState } from "react";
import { ToastContainer } from "react-toastify";
import { useForm } from "react-hook-form";
import Image from "next/image";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";

import {
  Form,
  FormGroup,
  FormControl,
  Row,
  Col,
  FormLabel,
} from "react-bootstrap";

const ChangePassword = () => {
  const [buttonDisable, setButtonDisable] = useState(false);
  const [currentPassword, setCurrentPassword] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const { register, handleSubmit, formState } = useForm({
    resolver: yupResolver(
      object().shape({
        current_password: string().required("Please enter a old password"),
        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;
            },
          ),
      }),
    ),
  });

  const { errors } = formState;
  const onSubmit = async (data: any) => {
    setButtonDisable(true);
  };

  return (
    <>
      <ToastContainer />
      <div className="form_body" id="profile_page">
        <Row className="d-flex justify-content-center mx-3">
          <Col lg={6} Col md={8} className="my-3 account-box">
            <Form onSubmit={handleSubmit(onSubmit)}>
              <FormLabel htmlFor="port_ramp">Old password</FormLabel>
              <FormGroup className="form-group">
                <FormControl
                  type={currentPassword ? "text" : "password"}
                  {...register("current_password")}
                  id="current_password"
                  autoComplete="off"
                  placeholder="Enter old password"
                  className={errors.current_password ? "is-invalid" : ""}
                />
                <span className="icon_input">
                  <Image
                    className="passwordIcon"
                    onClick={() => setCurrentPassword(!currentPassword)}
                    alt="Currentpassword"
                    width={20}
                    height={20}
                    src={
                      currentPassword
                        ? "/images/hidepassword.png"
                        : "/images/password.png"
                    }
                  />
                </span>
                <Form.Control.Feedback type="invalid">
                  {errors?.current_password?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>

              <FormLabel htmlFor="port_ramp">New password</FormLabel>
              <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">
                  <Image
                    className="passwordIcon"
                    onClick={() => setShowPassword(!showPassword)}
                    alt="Newpassword"
                    width={20}
                    height={20}
                    src={
                      showPassword
                        ? "/images/hidepassword.png"
                        : "/images/password.png"
                    }
                  />
                </span>
                <Form.Control.Feedback type="invalid">
                  {errors.password?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>

              <FormLabel htmlFor="port_ramp">Confirm password</FormLabel>
              <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">
                  <Image
                    className="passwordIcon"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    alt="Confirmpassword"
                    width={20}
                    height={20}
                    src={
                      showConfirmPassword
                        ? "/images/hidepassword.png"
                        : "/images/password.png"
                    }
                  />
                </span>
                <Form.Control.Feedback type="invalid">
                  {errors?.confirm_password?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
              <Row className="justify-content-center my-3 px-3">
                <button
                  type="submit"
                  className="W-0 btn-block primary_btn_profile"
                  disabled={buttonDisable}
                >
                  {buttonDisable ? (
                    <>
                      <span
                        className="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true"
                      ></span>{" "}
                      Please wait...{" "}
                    </>
                  ) : (
                    "CHANGE PASSWORD"
                  )}
                </button>
              </Row>
            </Form>
          </Col>
        </Row>
      </div>
    </>
  );
};
export default ChangePassword;