// ChangePasswordModal.tsx
import React, { useState } from 'react';
import { Modal, Form, Input, notification, Spin } from 'antd';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import type { UserPassword } from '../interface';
import { changePassword } from '../service';
import { changeOldPasswordValidator } from '@/utills/validator';
interface ChangePasswordModalProps {
    userId: any
    visible: boolean
    onCancel: () => void
    onOk: () => void
}
const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
  userId,
  visible,
  onCancel,
  onOk,
}) => {
  const [form] = Form.useForm();
  const [oldPasswordVisible, setOldPasswordVisible] = useState<boolean>(false);
  const [passwordVisible, setPasswordVisible] = useState<boolean>(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  const onFinish = (formData: UserPassword): void => {
    const newFormData = {
      oldPassword: formData.oldPassword,
      newPassword: formData.newPassword,
    };
    form.validateFields()
      .then(() => {
        setLoading(true);
        if (userId !== undefined && userId !== null) {
          changePassword(userId, newFormData)
            .then((el) => {
              notification.success({
                message: 'Success',
                description: el?.message,
              });
            })
            .catch((error) => {
              notification.error({
                message: 'Error',
                description: error?.response?.data.message,
              });
            }).finally(() => {
              setLoading(false);
              setTimeout(() => {
                onOk();
              }, 1000);

            });
        }
      })
      .catch((errorInfo) => {
        console.error('Failed:', errorInfo);
        onOk();
      });
  };

  return (
    <Modal
      title="Change Password"
      open={visible}
      okText="Update Password"
      // onOk={handleOk}
      onOk={() => {
        form.submit();
      }}
      onCancel={onCancel}
      className="custom-new-modal">
      <Spin spinning={loading}>
        <Form
          form={form}
          onFinish={onFinish}
          colon={false}
          labelAlign="left"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}>
          <Form.Item
            label="Old Password"
            name="oldPassword"
            rules={[{ required: true, validator: changeOldPasswordValidator }]}>
            <Input.Password
              placeholder="Old Password"
              type={oldPasswordVisible ? 'text' : 'password'}
              suffix={
                <span
                  style={{ cursor: 'pointer' }}
                  onClick={() => {
                    setOldPasswordVisible(!oldPasswordVisible);
                  }}>
                  {oldPasswordVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                </span>
              }
            />
          </Form.Item>

          <Form.Item
            label="New Password"
            name="newPassword"
            rules={[
              ({ getFieldValue }) => ({
                async validator(_: unknown, value: string) {
                  if (!value) {
                    return await Promise.reject(
                      new Error('Please Enter New Password')
                    );
                  }
                  if (value.length > 128) {
                    return await Promise.reject(
                      new Error('Password Must be at Most 128 Characters Long')
                    );
                  }
                  if (value.length < 8) {
                    return await Promise.reject(
                      new Error('Password Must be at Least 8 Characters Long')
                    );
                  }
                  if (
                    !/^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#*^()_+=])[A-Za-z\d@$!%*?&#*^()_+=]+$/.test(
                      value
                    )
                  ) {
                    return await Promise.reject(
                      new Error(
                        'Must Enter at Least 1 Uppercase Letter, 1 Number, and 1 Special Character'
                      )
                    );
                  }
                  if (getFieldValue('oldPassword') === value) {
                    return await Promise.reject(
                      new Error('Old And New Passwords Cannot Be The Same')
                    );
                  }
                  await Promise.resolve();
                },
                required: true,
              }),
            ]}>
            <Input.Password
              placeholder="New Password"
              type={passwordVisible ? 'text' : 'password'}
              suffix={
                <span
                  style={{ cursor: 'pointer' }}
                  onClick={() => {
                    setPasswordVisible(!passwordVisible);
                  }}>
                  {passwordVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                </span>
              }
            />
          </Form.Item>

          <Form.Item
            label="Confirm Password"
            name="confirmPassword"
            dependencies={['newPassword']}
            rules={[
              { required: true, message: 'Please Enter Confirm Password' },
              ({ getFieldValue }) => ({
                async validator(_, value) {
                  if (value === undefined || getFieldValue('newPassword') === value) {
                    await Promise.resolve();
                    return;
                  }
                  return await Promise.reject(
                    new Error('New And Confirm Password Are Not Match')
                  );
                },
              }),
            ]}>
            <Input.Password
              placeholder="Confirm Password"
              type={confirmPasswordVisible ? 'text' : 'password'}
              suffix={
                <span
                  style={{ cursor: 'pointer' }}
                  onClick={() => {
                    setConfirmPasswordVisible(!confirmPasswordVisible);
                  }}>
                  {confirmPasswordVisible ? (
                    <EyeOutlined />
                  ) : (
                    <EyeInvisibleOutlined />
                  )}
                </span>
              }
            />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
};

export default ChangePasswordModal;