'use client';
import { MdOutlineSpaceDashboard } from "react-icons/md";
import { useEffect, useState } from 'react';
import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
import machinoxLogo from "@/assets/images/Machinox Logo.svg";
import Link from "next/link";
import { useRouter } from "next/navigation";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";

const VerticalMenu = () => {
    const [loader, setLoader] = useState(false);
    const [list, setList] = useState([]);
    const navigate = useRouter();
    const [URL, setURL] = useState("/dashboard");
    const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);  

    useEffect(() => {
        handleGetLeftMenu();
    }, [])

    const handleGetLeftMenu = () => {
        return WebService.getAPI({
            action: `admin/left-menus`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setLoader(false);
            setList(res?.list);

        }).catch((error: any) => {
            setLoader(false)
            return false;
        })
    }

    const handleSelectedMenu = (url: string) => {
        setURL(url);
    }

    const toggleSubMenu = (index: number) => {
        setOpenSubMenu(openSubMenu === index ? null : index);
    }    
    return (
        <>
            {loader && <CompoLoader />}
            <div className="layout-veritcle-menu">
                <div id="vertical_menu" className="verticle-menu">
                    <div className='p-3' style={{ display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "rgb(226, 226, 226) 0px 0px 6px 0px" }}>
                        <img src={machinoxLogo.src} width={40} height={44} alt='' onClick={() => navigate.push("/dashboard")} />
                    </div>
                    <div className="menu-list">
                        {list.map((itm: any, index: any) => (
                            <div key={index}>
                                <div
                                    style={{ cursor: "pointer" }}
                                    onClick={() => itm?.sub_menus?.length > 0 && toggleSubMenu(index)}
                                >
                                    <Link
                                        href={itm?.url || '/'}
                                        className={URL === itm?.url ? "menu-item active" : 'menu-item'}
                                        onClick={() => handleSelectedMenu(itm?.url)}
                                    >
                                        <span className="nav-text" style={{ float: "left" }}>{itm?.name}</span>
                                        {itm?.sub_menus?.length > 0 && (
                                            <span style={{ float: "right" }}>
                                                {openSubMenu === index ? <IoIosArrowDown /> : <IoIosArrowForward />}
                                            </span>
                                        )}
                                    </Link>
                                </div>

                                {itm?.sub_menus?.length > 0 && openSubMenu === index && (
                                    <div className="menu-list" style={{ marginLeft: "15px" }}>
                                        {itm?.sub_menus.map((subMenu: any, subIndex: any) => (
                                            <Link
                                                key={subIndex}
                                                href={subMenu?.url || '/'}
                                                className={URL === subMenu?.url ? "menu-item active" : 'menu-item'}
                                                onClick={() => handleSelectedMenu(subMenu?.url)}
                                            >
                                                <span className="nav-text" style={{ float: "left" }}>{subMenu?.name}</span>
                                            </Link>
                                        ))}
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>

                </div>
            </div>
        </>
    )
}
export default VerticalMenu;