import React, {useEffect, useRef, useState} from 'react';
import { AccountDetailRespond } from '../../client/auth_client';

interface EditPasswordModalProps {
    user: AccountDetailRespond;
    closeModal: () => void;
}

const EditPasswordModal: React.FC<EditPasswordModalProps> = ({ user, closeModal }) => {
    const modalRef = useRef<HTMLDivElement>(null);
    const [newPassword, setNewPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');

    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Escape') {
                closeModal();
            }
        };

        const handleClickOutside = (e: MouseEvent) => {
            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
                closeModal();
            }
        };

        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [closeModal]);

    return (
        <div className="edit-password-window">
            <div className="edit-password-content" ref={modalRef}>
                <h3>Edit Password for {user.userName}</h3>
                <label>
                    New Password:
                    <input
                        type="password"
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                        className="form-control"
                    />
                </label>
                <label>
                    Confirm New Password:
                    <input
                        type="password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        className="form-control"
                    />
                </label>
                <div className="edit-password-actions">
                    <button className="btn-save" onClick={() => alert('Save password clicked')}>Save</button>
                    <button className="btn-cancel" onClick={closeModal}>Cancel</button>
                </div>
            </div>
        </div>
    );
};

export default EditPasswordModal;
