import React, { useState } from 'react';
import { Form, Input } from 'antd';
import styles from "./passordInput.module.scss";
interface PasswordProps {
  password: string;
  setPassword: React.Dispatch<React.SetStateAction<string>>;
}

const PasswordInput: React.FC<PasswordProps> = ({ password, setPassword }) => {
  const [validations, setValidations] = useState({
    length: false,
    uppercase: false,
    lowercase: false,
    digit: false,
    specialChar: false,
  });

  const handlePasswordChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    const newPassword = evt.target.value;
    setPassword(newPassword);

    // Perform validations
    const validationsResult = {
      length: newPassword.length >= 8,
      uppercase: /[A-Z]/.test(newPassword),
      lowercase: /[a-z]/.test(newPassword),
      digit: /[0-9]/.test(newPassword),
      specialChar: /[#?!@$%^&*-]/.test(newPassword),
    };

    setValidations(validationsResult);
  };

  return (
    <>
      <Input.Password
        
        placeholder="At Least 8 Characters"
        value={password}
        onChange={handlePasswordChange}
        onBlur={() => setPassword(prevPassword => prevPassword.replace(/\s/g, ''))}
        onCopy={e => {
          e.preventDefault();
          return false;
        }}
      />
      <ul >
        <li className={validations.length ? styles.valid : styles.invalid}>At least 8 characters</li>
        <li className={validations.uppercase ? styles.valid : styles.invalid}>At least one uppercase letter</li>
        <li className={validations.lowercase ? styles.valid : styles.invalid}>At least one lowercase letter</li>
        <li className={validations.digit ? styles.valid : styles.invalid}>At least one digit</li>
        <li className={validations.specialChar ? styles.valid : styles.invalid}>At least one special character</li>
      </ul>
    </>
  );
};

export default PasswordInput;