import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Link from 'next/link'
import { useParams, usePathname } from 'next/navigation'
import { setHeading } from '@/lib/Features/ThemeSlice/themeSlice'
import { AppStore } from '@/lib/store'
import { toggleSidebar } from "@/lib/Features/ThemeSlice/themeSlice"
import { setCurrentSidebarTab } from '@/lib/Features/UserDetailSidebar/userDetailSidebar'

const SidebarMenu = (props: any) => {
    const { menuList, userDetails } = props;
    const pathName = usePathname();
    const params: any = useParams();
    const dispatch = useDispatch();
    const { toggleSidebarState, toggleSmallSidebarState } = useSelector((state: AppStore) => state.themeSlice);
    const [activeMenu, setActiveMenu] = useState('');
    const [activeChildMenu, setActiveChildMenu] = useState('');

    useEffect(() => {
        if (pathName) {
            let tempValue: any = null;
            if (params) {
                tempValue = pathName.split(params?.ticketNumber)[0];
                tempValue = tempValue.substring(0, tempValue.length - 1);
            }

            let tempActiveMenu: any = null;
            let tempActiveChildMenu: any = null;

            menuList.forEach((menu) => {

                if (menu?.children) {
                    menu?.children.forEach((child) => {
                        if ((child.path == pathName) || (pathName.includes(child.path)) || (child.path == tempValue)) {
                            tempActiveMenu = menu.title;
                            tempActiveChildMenu = child?.title;
                        }
                    });
                } else {
                    if ((menu.path == pathName) || (pathName.includes(menu.path)) || (menu.path == tempValue)) {
                        tempActiveMenu = menu.title;
                    }
                }
            });

            setActiveMenu(tempActiveMenu);
            setActiveChildMenu(tempActiveChildMenu);
        }
    }, [pathName, menuList]);

    const handleParentMenu = (menu: any) => {
        dispatch(setCurrentSidebarTab(false))
        setActiveMenu(menu.title)
        setActiveChildMenu('')
        let tempObj = {
            icon: false,
            title: menu.title
        }
        menu.type == 'link' && dispatch(setHeading(tempObj));
        menu.type == 'link' && dispatch(toggleSidebar(!toggleSidebarState));
    }

    const handleSubMenu = (child: any) => {
        setActiveChildMenu(child.title)
        let tempObj = {
            icon: false,
            title: child.title
        }
        dispatch(setHeading(tempObj))
        dispatch(toggleSidebar(!toggleSidebarState))
    }

    return (
        <ul className='flex-1 md:mt-6 mt-4 px-3 space-y-0.5'>
            {!toggleSmallSidebarState && (
                <li className='px-3 pb-2 pt-1 text-[10px] uppercase tracking-[0.22em] font-semibold text-white/50'>
                    Menu
                </li>
            )}
            {menuList.map((menu, i) =>
                <li className={`group ${menu.type == 'link' ? 'flex items-center justify-between' : 'block'} `} onClick={() => handleParentMenu(menu)} key={i}>
                    {menu.type == 'link' ?
                        <Link
                            href={`/${userDetails?.role}${menu.path}`}
                            className={`${menu.title == activeMenu ? 'active-menu text-white bg-white/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] backdrop-blur-sm before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-0.5 before:bg-white before:rounded-r' : 'text-white/80 hover:text-white hover:bg-white/10'} ${toggleSmallSidebarState ? 'justify-center' : ''} flex items-center flex-1 text-[0.95rem] leading-5 font-semibold transition-all duration-200 relative gap-3 px-3 py-3 rounded-xl`}
                            title={menu.title}
                        >
                            <span className='flex items-center flex-1 gap-3'>
                                <span className={`${menu.title == activeMenu ? 'bg-white/25' : 'bg-white/10 group-hover:bg-white/20'} flex items-center justify-center h-9 w-9 rounded-xl transition-colors shrink-0`}>
                                    {menu.icon}
                                </span>
                                <span className={`${toggleSmallSidebarState ? 'opacity-0' : 'opacity-100 delay-150'} transition-opacity`}>{menu.title}</span>
                            </span>
                            {
                                (menu.label && userDetails?.invited_count > 0) &&
                                <label className={`bg-white text-primary h-5 min-w-5 px-1.5 flex items-center justify-center text-[11px] font-bold rounded-full shadow-soft`}>{userDetails?.invited_count > 99 ? '99+' : userDetails?.invited_count}</label>
                            }
                        </Link> :
                        <>
                            <span className={`${menu.title == activeMenu ? 'active-menu text-white' : 'text-white/80'}  ${toggleSmallSidebarState ? 'justify-center' : ''} flex gap-3 items-center transition-all text-[0.95rem] cursor-pointer relative font-semibold px-3 py-3`} title={menu.title}>
                                <span className={`${menu.title == activeMenu ? 'bg-white/25' : 'bg-white/10 group-hover:bg-white/20'} flex items-center justify-center h-9 w-9 rounded-xl transition-colors shrink-0`}>
                                    {menu.icon}
                                </span>
                                <span className={`${toggleSmallSidebarState ? 'opacity-0' : 'opacity-100 delay-150'} transition-opacity `}>{menu.title}</span>
                            </span>
                            <ul>
                                {
                                    menu?.children?.map((child, ind) =>
                                        <li className={`${activeMenu == menu.title ? 'block' : 'hidden'} group`} onClick={() => handleSubMenu(child)} key={ind}>
                                            <Link
                                                href={`/${userDetails?.role}${child?.path}`}
                                                className={`${child.title == activeChildMenu ? 'text-white bg-white/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] backdrop-blur-sm' : 'text-white/75 hover:text-white hover:bg-white/10'} ${toggleSmallSidebarState ? 'justify-center' : ''} flex gap-3 items-center font-medium transition-all duration-200 relative text-sm pl-10 pr-3 py-2 rounded-xl mx-1 mb-0.5`}
                                                title={child.title}
                                            >
                                                <div className={`${child.title == activeChildMenu ? 'bg-white' : 'bg-white/60'} w-1.5 h-1.5 rounded-full`}></div>
                                                <span className={`${toggleSmallSidebarState ? 'opacity-0' : 'opacity-100 delay-150'} transition-opacity`}>{child.title}</span>
                                            </Link>
                                        </li>
                                    )
                                }

                            </ul>
                        </>
                    }
                </li>
            )}
        </ul >
    )
}

export default SidebarMenu