'use client'
import { Suspense, useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import type { AppStore } from "@/lib/store"
import { toggleSidebar } from '@/lib/Features/ThemeSlice/themeSlice'
import { MenuButtonSVG } from "@/Component/Common/SVGs/CommonSVG"
import HeaderNotification from "./HeaderNotification"
import HeaderWhatsApp from "./HeaderWhatsApp"
import HeaderProfile from "./HeaderProfile"
import HeaderTitle from "./HeaderTitle"
import LanguageDropdown from "@/Component/Common/LanguageDropdown"
import { usePathname } from "next/navigation"

const Header = (props) => {
    const { hideHeader } = props;
    const dispatch = useDispatch();
    const pathname = usePathname();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails)
    const { toggleSidebarState } = useSelector((state: AppStore) => state.themeSlice);   

    const handleToggle = () => {
        dispatch(toggleSidebar(!toggleSidebarState))
    }

    return (
        <>
            <header className={`${hideHeader ? 'xl:!pr-72' : ''} sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full text-sm xl:pt-6 pt-3 xl:pb-5 pb-3 xl:ps-64 transition-all bg-white/75 backdrop-blur-xl border-b border-neutral-100/80`}>
                <nav className={`flex basis-full w-full mx-auto 2xl:px-16 xl:px-12 md:px-8 px-4 ${hideHeader ? 'lg:items-start' : 'items-center'}`}>
                    <button onClick={handleToggle} type="button" className={`${hideHeader ? 'mt-1' : ''} me-3 xl:me-0 xl:hidden text-neutral-700 hover:text-primary transition-colors`}>
                        <MenuButtonSVG />
                    </button>
                    <div className={`w-full flex ms-auto justify-between sm:gap-x-3 sm:order-3 ${hideHeader ? 'lg:items-start items-center' : 'items-center'}`}>
                        <Suspense><HeaderTitle hideHeader={hideHeader} /></Suspense>
                        <div className="ms-auto flex flex-row items-center justify-end min-[640px]:gap-x-3 gap-x-2">
                            {(userDetails?.role !== 'admin' || pathname?.includes('/admin/category') || pathname?.includes('/admin/keywords')) && <LanguageDropdown />}
                            {userDetails?.role === 'admin' && <HeaderWhatsApp />}
                            <HeaderNotification />
                            {userDetails && <HeaderProfile userDetails={userDetails} hideHeader={hideHeader} />}
                        </div>
                    </div>
                </nav>
            </header>
        </>
    )
}

export default Header