top

import {useEffect, useState} from "react";
import {useCookies} from "react-cookie";
import cookiesKey from "../../utils/constant/cookies";
import {useNavigate} from "react-router-dom";
import {useDispatch} from "react-redux";
import {clearAuthInfo} from "../../app/slice/auth/state";

export const TopBarDropdown = () => {
    const [hover, setHover] = useState(false);

    const [cookies, setCookie, removeCookie] = useCookies();

    const navigate = useNavigate();

    const dispatch = useDispatch();

    const handleRemove = () => {
        removeCookie(cookiesKey.AuthToken)
        dispatch(clearAuthInfo())

    }


    return <div className="relative inline-block text-left" onMouseEnter={() => {
        setHover(true)
    }} onMouseLeave={() => setHover(false)}>
        <div>
            <button type="button"
                    className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                    id="menu-button" aria-expanded="true" aria-haspopup="true">
                Profile
                <svg
                    className={`-mr-1 h-5 w-5 text-gray-400 ${hover ? "rotate-180 transition ease-in-out delay-50" : ""}`}
                    viewBox="0 0 20 20" fill="currentColor"
                    aria-hidden="true">
                    <path fillRule="evenodd"
                          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                          clipRule="evenodd"/>
                </svg>
            </button>
        </div>
        {
            hover ? <div
                className="absolute right-0 z-10 "
                role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabIndex="-1">
                <div
                    className="mt-2 w-56 origin-top-right rounded-md bg-white shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none"
                    role="none">

                    <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabIndex="-1"
                       id="menu-item-0">Account settings</a>
                    <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabIndex="-1"
                       id="menu-item-1">Support</a>
                    <a href="#" onClick={(e) => {
                        e.preventDefault();
                        handleRemove()
                    }} className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabIndex="-1"
                       id="menu-item-2">Sign out</a>
                </div>
            </div> : ""
        }


    </div>
}