import React, {ReactNode, useContext, useEffect, useRef, useState} from 'react';
import avatarD from "../../../assets/images/avatar.png";
import close from "../../../assets/images/close.png";
import down_arrow from "../../../assets/images/down_arrow.png";
import {Link} from "react-router-dom";
import AuthContext from "../../../context/auth-context";
import ThemeToggler from "../../UI/CustomToggler/ThemeToggler/ThemeToggler";

type ProfileProps = {
    children?: ReactNode
}

const Profile = ({children}: ProfileProps) => {

    const [profileModal, setProfileModal] = useState(false);
    const profileRef = useRef<HTMLButtonElement>(null);
    const {currentUser, logoutUser, userAvatar} = useContext(AuthContext);

    useEffect(() => {
        const handleClick = (e: any) => {

            if (profileModal && !(e.source && e.source.current === profileRef.current)) {
                setProfileModal(false)
            }
        }
        window.addEventListener('click', handleClick)
        return () => window.removeEventListener('click', handleClick)
    }, [profileModal]);

    return (
        <div
            className="profile--dmenu settings-btn"
            id={profileModal ? "fixedHeight" : "closed"}
        >
            <button
                ref={profileRef}
                className="dropdown-toggle-profile d-flex justify-content-between"
                type="button"
                id="menuRightDd"
                title={`${currentUser?.lastname} ${currentUser?.firstname}`}
                onClick={(e) => {
                    // e.stopPropagation();
                    // @ts-ignore
                    e.nativeEvent.source = profileRef
                    setProfileModal(!profileModal);
                }}
            >
                <p className={`profile--dmenu--userName ${profileModal && 'visible'}`}>
                    {currentUser?.lastname} {currentUser?.firstname}
                </p>

                <img className={'avatar'} width="35" height="33"
                     src={userAvatar ? URL.createObjectURL(userAvatar) : avatarD} alt="avatar"/>

                <div className="dd-image">
                    {profileModal ? (
                        <img
                            className="dd-image-close"
                            src={close}
                            alt="x-btn"
                        />
                    ) : (
                        <img
                            className="dd-image-open"
                            src={down_arrow}
                            alt="down_arrow-btn"
                        />
                    )}
                </div>
            </button>

            {profileModal && (
                <ul
                    className="dropdown-menu-profile"
                    aria-labelledby="menuRightDd"
                    id={profileModal ? "show" : ""}
                >
                    <li>
                        <Link className="dropdown-item" to="/settings">
                            Ρυθμίσεις
                        </Link>
                    </li>
                    <li>
									<span
                                        className="dropdown-item"
                                        id="logout"
                                        onClick={logoutUser}
                                    >
										Logout
									</span>
                    </li>
                </ul>
            )}
        </div>
    );
}

export default Profile;