import { Button, Form, Input, notification } from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./changePassword.module.scss";
import cx from "classnames";
import * as ProfileApi from "../../../pages/api/profile";
import { Router, useRouter } from "next/router";
import { passwordMsg } from "../../../constants/errorMessages";

const ChangePassword: FC<any> = () => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [loginRes, setLoginRes] = useState<any>({});
  const router = useRouter();
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
   
    setLoginRes(details);
  }, []);

  const onFinishFailed = (errorInfo: any) => {
    notification.error({
      message: "Change Password!",
      description: "Please fill in the required information.",
    });
  };

  const onFinish = () => {
    if (password !== confirmPassword) {
      notification.error({message:"Passwords don't match"});
    } else {
      const params = {
        first_name: loginRes?.data?.first_name,
        last_name: loginRes?.data?.last_name,
        gender: loginRes?.data?.gender || "Male",
        email: loginRes?.data?.email,
        password: password,
        confirmPassword: confirmPassword,
        token: loginRes?.token,
      };

      ProfileApi.passwordUpdate(params).then((res) => {
        router.push({
            pathname: `/home`
          });
      });
    }
  };

  return (
    <>
      <div className={styles.tabContainer}>
        <h1 className={styles.title}>Change Password</h1>
        <Form
          name="change-password"
          className="login-form"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <div className="ant-row mt-8">
            <Form.Item
              className={
                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-12"
              }
              name="password"
              
              rules={[
                
                {
                  required: true,
                  pattern:/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/,
                  message: passwordMsg+    "  Ex : Johney@1",
                }
              ]}
            >
              <Input.Password
                placeholder="password"
                type="password"
                value={password}
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
                onCopy={(e)=>{
                  e.preventDefault()
                  return false;
                }}
              />
            </Form.Item>
            <Form.Item
              className={cx(
                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                styles.spacePadding
              )}
              name="confirmPassword"
              dependencies={["password"]}
                
              rules={[
                {
                  required: true,
                  message: "Please Enter Confirm Password!",
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue("password") === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(
                      new Error(
                        "The two passwords that you entered do not match!"
                      )
                    );
                  },
                }),
              ]}
            >
              <Input.Password
                placeholder="Confirm Password"
                value={confirmPassword}
                onChange={(e) => {
                  setConfirmPassword(e.target.value);
                }}
                onPaste={(e)=>{
                  e.preventDefault()
                  return false;
                }}
              />
            </Form.Item>
            <Form.Item
              className={
                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-12"
              }
            >
              <Button type="primary" htmlType="submit" block>
                Update Password
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
    </>
  );
};

export default ChangePassword;