import React, {useEffect, useState} from 'react';
import {ThemeToggle} from "@/app/theme-toggle";
import {useAppSelector} from "@/lib/store/hooks";
import {useRouter} from "next/navigation";
import {toast} from "react-toastify";
import {FaBars} from "react-icons/fa6";
import Link from "next/link";
import {Image} from "next/dist/client/image-component";

interface Props {
    sidebar: boolean;
    setSidebar: (value: boolean) => void;
    submitLogout: () => Promise<{ success: boolean, message: string}>
}

function Topbar({sidebar, submitLogout, setSidebar}: Props) {
    const userDetails = useAppSelector((state) => state.user);
    const [menu, setMenu] = useState(false);
    const router = useRouter();
    const Logout: () => Promise<void> = async () => {
        const res = await submitLogout();
        toast.success('Logged Out Successfully');
        router.push('/');
    };
    useEffect(() => {
        document.addEventListener('click', (e) => {
            if (e.target instanceof HTMLElement) {
                if (!e.target.closest('.dropdown-menu') && !e.target.closest('.custom-dropdown-bar')) {
                    setMenu(false);
                }
            }
        });
    }, [])
    return (
        <div className="py-2 px-6 bg-gray-50 dark:bg-gray-900 flex items-center shadow-md shadow-black/5 sticky top-0 left-0 z-30 ">
            <button type="button" className="text-lg text-color font-semibold sidebar-toggle cursor-pointer" onClick={() => {
                setSidebar(!sidebar)
            }}>
                <FaBars/>
            </button>
            <ul className="ml-auto flex items-center space-x-3">
                <ThemeToggle/>
                <li className="dropdown ml-3 relative custom-dropdown-bar">
                    <button type="button" className="dropdown-toggle flex items-center cursor-pointer" onClick={() => {
                        setMenu(!menu)
                    }}>
                        <div className="shrink-0 w-10 h-10 relative">
                            <div className="p-1 bg-white dark:bg-black rounded-full focus:outline-none focus:ring">
                                <Image width={100} height={100} className="w-8 h-8 rounded-full"
                                       src={userDetails.avatar ? process.env.NEXT_PUBLIC_URL + userDetails.avatar : '/avater.jpg'}
                                       alt="profile"/>
                                <div
                                    className="top-0 left-7 absolute w-3 h-3 bg-lime-400 border-2 border-white rounded-full animate-ping"></div>
                                <div
                                    className="top-0 left-7 absolute w-3 h-3 bg-lime-500 border-2 border-white rounded-full">

                                </div>
                            </div>
                        </div>
                        <div className="p-2 md:block text-left">
                            <h2 className="text-sm font-semibold text-color">{userDetails.name}</h2>
                            <p className="text-xs text-color">{userDetails.email}</p>
                        </div>
                    </button>
                    <ul className={`dropdown-menu shadow-md shadow-black/3 dark:shadow-black z-30 absolute right-0  py-1.5 rounded-md bg-gray-100 dark:bg-gray-900  border-gray-100 w-full max-w-[140px] ${menu ? 'collapse:disabled' : 'collapse'}`}>
                        <li>
                            <Link href={'/profile'}
                                  className="flex items-center text-[13px] py-1.5 px-4 text-color hover:text-[#f84525] hover:bg-gray-50 dark:hover:bg-black">
                                Profile
                            </Link>
                        </li>
                        <li>
                            <button
                                className="flex w-full items-center text-[13px] py-1.5 px-4 text-color hover:text-[#f84525] cursor-pointer hover:bg-gray-50 dark:hover:bg-black"
                                onClick={() => {
                                    Logout()
                                }}>
                                Log Out
                            </button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    );
}

export default Topbar;