import { useEffect, useState } from "react";
import Image from 'next/image'
import { BiBell, BiExit } from "react-icons/bi"
import { MdApproval, MdRoom, MdRoomPreferences, MdViewCompact } from "react-icons/md"
import { TbDoorExit } from "react-icons/tb"
import { RiBook2Fill, RiHistoryFill, RiListCheck, RiUserSettingsFill, RiUserStarFill } from "react-icons/ri"
import Compact from "@/utils/view/compact";
import router from "next/router";
import Link from "next/link";
import { BsDoorOpenFill, BsFillCaretDownFill, BsGearFill } from "react-icons/bs";
import { FaCarRear, FaUsers } from "react-icons/fa6";
// import listMenu from "../../utils/menu/listmenu"

const Navigation = (props:any) => {
    const mobile = Compact()
    const [openMenu, setOpenMenu] = useState(false);
    const [openNotif, setOpenNotif] = useState(false);
    const [openProfile, setOpenProfile] = useState(false);
    const [token, setToken] = useState<string | null>(null);
    const [userData, setUserData] = useState([
        {'muse_name':''}
    ])

    useEffect(() => {


        const storedToken = localStorage.getItem('ateraToken');
        const storedUserData = localStorage.getItem('ateraUser');
      
        if (!storedToken) {
          router.push('/login');
        } else {
          setToken(storedToken);
          setUserData(JSON.parse(storedUserData!));
        }
      }, [router]);

    const menu = [
        {
            "name":"fleet",
            "icon":<FaCarRear/>,
            "link":"#",
            "astitle":true,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"booking list",
            "icon":<RiBook2Fill/>,
            "link":"/fleet/booking-list",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"your booking history",
            "icon":<RiHistoryFill/>,
            "link":"/fleet/booking-history",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"fleet list and detail",
            "icon":<RiListCheck/>,
            "link":"/fleet/manage",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"meeting room",
            "icon":<BsDoorOpenFill/>,
            "link":"#",
            "astitle":true,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"booking list",
            "icon":<RiBook2Fill/>,
            "link":"/room/booking-list",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"your booking history",
            "icon":<RiHistoryFill/>,
            "link":"/room/booking-history",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"room list and detail",
            "icon":<RiListCheck/>,
            "link":"/room/manage",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"user account control",
            "icon":<FaUsers/>,
            "link":"#",
            "astitle":true,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"users list",
            "icon":<RiListCheck/>,
            "link":"/user/manage",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"approval",
            "icon":<MdApproval/>,
            "link":"#",
            "astitle":true,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"fleet approval",
            "icon":<RiListCheck/>,
            "link":"/fleet/approval",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        {
            "name":"room approval",
            "icon":<RiListCheck/>,
            "link":"/room/approval",
            "astitle":false,
            "assubmenu":false,
            "havesubmenu":false,
            "submenu":[],
            "role":['1']
        },
        
    ]

    function handleLogout() {
        localStorage.removeItem('ateraToken');
        localStorage.removeItem('ateraUser');
        const storedToken = localStorage.getItem('token')
        if (!storedToken) {
            router.push('/login');
        }
    }

    var getInitials = function (text:string) {
        var names = text.split(' '),
            initials = names[0].substring(0, 1).toUpperCase();
        
        if (names.length > 1) {
            initials += names[names.length - 1].substring(0, 1).toUpperCase();
        }
        return initials;
    };

    return (
        <div className='flex flex-row w-screen h-screen'>
            <div id="sidebar" className={`flex flex-col h-screen ${openMenu ? (mobile ? 'w-[250px]' : 'w-[400px]') : 'w-0'} duration-700 bg-gray-100 ${mobile ? 'absolute z-10' : 'relative'}`}>
                <div className="flex flex-col">
                    {
                        openMenu ?
                        <div className={`flex h-10 ${!openMenu && 'hidden'} text-clip overflow-hidden whitespace-nowrap mt-5 font-bold text-gray-400 ml-5`}>Booking Menu</div>
                        : <div className="flex h-10 mt-5"/>
                    }
                    <div className="flex flex-col gap-1 overflow-y-auto">
                        {
                            menu.map((item:any,index:number)=>{
                                return(
                                    <>
                                        <Link href={`${item.link}`}  key={index} className={`flex flex-row gap-2 p-3 text-primary rounded-lg items-center ${!item.astitle ? 'hover:bg-secondary h-10 mx-5 hover:text-white' : ' mx-3 h-5 mt-2'}`}>
                                            <div className={`flex text-lg ${!openMenu &&  item.astitle && 'text-gray-400'}`}>{item.icon}</div>
                                            <div className={`flex text-xs ${item.astitle ? 'uppercase font-semibold' : 'capitalize'} ${!openMenu && 'hidden'} text-clip overflow-hidden whitespace-nowrap`}>{item.name}</div>
                                        </Link>
                                        {
                                            item.astitle && <div className="flex w-full h-[1px] bg-gray-200"/>
                                        }
                                    </>
                                )
                            })
                        }
                    </div>
                    <div className={`flex flex-col gap-1 overflow-y-auto mt-1 ${!mobile && 'hidden'}`}>
                        <div className={`flex flex-row gap-2 p-3 text-primary rounded-lg items-center mx-3 h-5 mt-2'`}>
                            <div className={`flex text-lg text-primary`}><BsGearFill/></div>
                            <div className={`flex text-xs uppercase font-semibold ${!openMenu && 'hidden'} text-clip overflow-hidden whitespace-nowrap`}>Profile</div>
                        </div>
                    <div className="flex w-full h-[1px] bg-gray-200"/>
                        <Link href={`${''}`} className={`flex flex-row gap-2 p-3 text-primary rounded-lg items-center hover:bg-secondary h-10 mx-5 hover:text-white'}`}>
                            <div className={`flex text-lg`}><RiUserSettingsFill/></div>
                            <div className={`flex text-xs capitalize'} ${!openMenu && 'hidden'} text-clip overflow-hidden whitespace-nowrap`}>Change Data</div>
                        </Link>
                        <div onClick={()=>handleLogout()}  className={`flex flex-row gap-2 p-3 text-primary rounded-lg items-center hover:bg-secondary h-10 mx-5 hover:text-white'}`}>
                            <div className={`flex text-lg`}><TbDoorExit/></div>
                            <div className={`flex text-xs capitalize'} ${!openMenu && 'hidden'} text-clip overflow-hidden whitespace-nowrap`}>Logout</div>
                        </div>
                    </div>
                </div>

                <div className={`absolute flex h-10 w-5 bg-primary -right-5 top-20 rounded-r-lg ${!mobile && 'hidden'}`} onClick={() => setOpenMenu(!openMenu)}>

                </div>
            </div>
              
            <div className={`flex flex-col w-full duration-1000`}>
                <div className={`flex p-1 cursor-pointer mx-3 top-4 absolute ${!mobile && ''}`} onClick={() => {!mobile && setOpenMenu(!openMenu)} }>
                    <Image
                        src={'/icon_atera.png'}
                        width={200} height={0}
                        alt='Ateraland logo'/>
                </div>
                <div className={`flex flex-row p-5 w-full justify-end ${mobile && 'hidden'}`}>
                    <div className={`flex flex-row h-full`}>
                        <div className="flex flex-col">
                            <div className="font-bold text-primary">General Affair Service System</div>
                            <h1 className=' text-sm cursor-pointer bg-primary text-white p-1 rounded-full text-center' onClick={()=>{setOpenProfile(!openProfile);setOpenNotif(false);mobile && setOpenMenu(false)}}>Login as {userData ? userData[0].muse_name : ''}</h1>
                        </div>
                        <div className={`origin-top-right -0 absolute right-1 top-16 mt-2 w-56 rounded-md shadow-lg ${!openProfile && "hidden"}`}>
                            <div className="py-1 rounded-md bg-white shadow-xs">
                                <Link className="flex flex-row gap-1 hover:bg-gray-100 items-center px-3 transition duration-150 ease-in-out" href="">
                                    <div className={`text-primary text-lg`}><RiUserSettingsFill/></div>
                                    <div className={`cursor-pointer px-4 py-2 text-sm text-primary`}>Change data</div>
                                </Link>
                                <div onClick={()=>handleLogout()} className="flex flex-row gap-1 hover:bg-gray-100 items-center px-3 transition duration-150 ease-in-out">
                                    <div className={`text-primary text-lg`}><TbDoorExit/></div>
                                    <div className={`cursor-pointer px-4 py-2 text-sm text-primary`}>Logout</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id='content' className={`flex mx-3 ${mobile ? ' mt-[85px] ml-7' : 'mt-0'} overflow-y-hidden`}>
                    {props.content}
                </div>
            </div>
        </div>
    );
};

export default Navigation;