'use client'
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import type { AppStore } from "@/lib/store"
import { toggleSidebar } from "@/lib/Features/ThemeSlice/themeSlice"
import SidebarBottom from "./SidebarBottom"
import SidebarLogo from "./SidebarLogo"
import SidebarMenu from "./SidebarMenu"
import MenuList from "./MenuList"
import SidebarMenuSkeleton from "./SidebarMenuSkeleton"
import { useTranslation } from "@/Utils/Hooks/useTranslate"

const Sidebar = () => {
    const dispatch = useDispatch();
    const { toggleSidebarState } = useSelector((state: AppStore) => state.themeSlice);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [menuList, setMenuList] = useState<any>([]);
    const { translations } = useTranslation();
    const [loading, setLoading] = useState(true);

    // Get all menu lists from MenuList
    const { AdminMenuList, BrandMenuList, InfluencerMenuList } = MenuList(translations);

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

    useEffect(() => {
        if (userDetails) {
            setLoading(false);
            if (userDetails?.role == 'admin') {
                setMenuList(AdminMenuList);
            } else if (userDetails?.role == 'brand') {
                setMenuList(BrandMenuList)
            } else {
                setMenuList(InfluencerMenuList);
            }
        }
    }, [userDetails, loading, translations]);

    return (
        <>
            <div className={`${toggleSidebarState ? "translate-x-0" : ""} -translate-x-full transition-all duration-300 transform fixed top-0 start-0 bottom-0 z-[60] w-64 bg-gradient-to-b from-primary via-[#a668ff] to-accent md:pt-7 pt-5 overflow-y-auto xl:block xl:translate-x-0 xl:end-auto xl:bottom-0 scrollbar-hide before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(at_20%_0%,rgba(255,255,255,0.18)_0px,transparent_50%),radial-gradient(at_100%_100%,rgba(255,95,180,0.3)_0px,transparent_60%)] before:pointer-events-none`}>
                <div className="flex flex-col h-full relative z-10">
                    <SidebarLogo />
                    {loading ? <SidebarMenuSkeleton /> :
                        <SidebarMenu menuList={menuList} userDetails={userDetails} />}
                    <SidebarBottom userDetails={userDetails} />
                </div>
            </div>
            <div className='xl:hidden'>
                <div onClick={handleToggle} className={`${toggleSidebarState ? "visible" : "invisible"} transition-all duration-300 fixed top-0 right-0 bottom-0 left-0 w-full h-full z-[59] bg-neutral-900/40 backdrop-blur-sm`}></div>
            </div>
        </>
    )
}

export default Sidebar