import { Button, Form, Input } from "antd";
import React from "react";
import { useUpdatePassword } from "../../../../apis/Login";

/**
 * Represents the ChangePassword  component
 * @module Profile/ChangePassword
 * @returns {JSX.Element} Returns a ChangePassword Jsx element
 */
const ChangePassword = () => {
  /**
   * React query hook that updates the password
   * @name useUpdatePassword
   * @type {Function}
   * @memberof module:Profile/ChangePassword
   */
  const { mutate: changeMutate, isLoading } = useUpdatePassword();
  /**
   * Handles the change password form submit
   * @function handleChangePassword
   * @param values {Object} Form values
   * @returns {void}
   */
  const handleChangePassword = (values) => {
    changeMutate({
      old_password: values.old_password,
      password: values.new_password,
      password2: values.confirm_password,
    });
  };
  /**
   * Function to validate password
   * @function validatePassword
   * @param rule {Object} Form rule
   * @param value {String} Form value
   * @param callback {Function} Form callback function
   * @return {Promise<never>|Promise<void>}
   */
  const validatePassword = (rule, value, callback) => {
    // Regular expression to check for at least one special character
    // Regular expression to check for at least one special character
    const specialCharRegex = /[!@#$%^&*()_+{}\[\]:;<>,.?~]/;
    // for Upper case characters
    const uppercaseLetters = /[A-Z]/;
    // for lower case characters
    const lowercaseLetters = /[a-z]/;
    const digitRegex = /[0-9]/;
    if (
      value &&
      value.length >= 8 &&
      specialCharRegex.test(value) &&
      uppercaseLetters.test(value) &&
      lowercaseLetters.test(value) &&
      digitRegex.test(value)
    ) {
      return Promise.resolve(); // Password is valid, call the callback with no arguments
    } else {
      return Promise.reject(
        new Error(
          "Password must be at least 8 characters long and contain at least one special character, uppercase letter, lowercase letter ond one  numeric digit"
        )
      );
    }
  };
  /**
   * Function to validate confirm password
   * @function validateConfirmPassword
   * @param getFieldValue {Function} Form getFieldValue function
   * @return {{validator(*, *): (Promise<void>)}}
   */
  const validateConfirmPassword = ({ getFieldValue }) => ({

    validator(_, value) {
      if (!value || getFieldValue("new_password") === value) {
        return Promise.resolve();
      }
      return Promise.reject(new Error("The two passwords does not match."));
    },
  });
  return (
    <div className="change_password_container">
      <Form layout="vertical" onFinish={handleChangePassword}>
        <Form.Item
          name="old_password"
          label="Old password"
          rules={[
            {
              required: true,
              message: "Please input your old password!",
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="new_password"
          label="New password"
          rules={[
            {
              required: true,
              message: "Please input your new password!",
            },
            {
              validator: validatePassword,
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="confirm_password"
          label="Confirm password"
          rules={[
            {
              required: true,
              message: "Please input your confirm password!",
            },
            validateConfirmPassword,
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Button
          loading={isLoading}
          className="w-100 change_btn"
          htmlType="submit"
          type="primary"
        >
          Change Password
        </Button>
      </Form>
    </div>
  );
};

export default ChangePassword;