import React, { useRef, useEffect } from "react";
import styles from "./AccountDropdown.module.css";
import {handleLogout} from '../Auth/Auth'
import {useNavigate} from "react-router-dom";

interface TokenPayload {
    unique_name: string;
    exp: number;
    [key: string]: any;
}

interface AccountDropdownProps {
    tokenPayload: TokenPayload | null;
    privilegeList: string[] | undefined;
}

const AccountDropdown: React.FC<AccountDropdownProps> = ({
                                                             tokenPayload,
                                                             privilegeList,
                                                         }) => {
    const dropdownRef = useRef<HTMLDivElement>(null);
    const [isOpen, setIsOpen] = React.useState(false);
    const navigate = useNavigate();

    const toggleDropdown = () => {
        setIsOpen((prev) => !prev);
    };

    const handleClickOutside = (event: MouseEvent) => {
        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
            setIsOpen(false);
        }
    };

    // @ts-ignore
    const havePrivilege = (privilege:string): boolean  => {
        if (!privilegeList) return false;

        return privilege in privilegeList || "admin" in privilegeList;

    }

    useEffect(() => {
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    return (
        <div className={styles.accountMenu} ref={dropdownRef}>
            <div className={styles.profileIcon} onClick={toggleDropdown}>
                <img
                    src="https://via.placeholder.com/40" // Replace with a real profile image
                    alt="Profile"
                    className="rounded-circle"
                />
            </div>
            {isOpen && (
                <div className={styles.dropdownMenu}>
                    <div className={styles.profileInfo}>
                        <img
                            src="https://via.placeholder.com/60" // Replace with a real profile image
                            alt="Profile"
                            className="rounded-circle mb-2"
                        />
                        <div>
                            <h6>{tokenPayload?.unique_name || "Guest"}</h6>
                            {tokenPayload && (
                                <small>
                                    Token expires at:{" "}
                                    {new Date(tokenPayload.exp * 1000).toLocaleString()}
                                </small>
                            )}
                        </div>
                    </div>
                    <ul className={styles.dropdownList}>
                        <li onClick={() => navigate('/accountSettings')}>Setting</li>
                        <li className={styles.logout} onClick={() => handleLogout(navigate)}>
                            Logout
                        </li>
                    </ul>
                </div>
            )}
        </div>
    );
};

export default AccountDropdown;
