import React, { useEffect, useState, useMemo, useCallback } from 'react';
import PropTypes from "prop-types";
import { Col, Collapse, Row } from 'react-bootstrap';

// Import Data
import navdata from "../Eneon/LayoutMenuData";
//i18n
import { withTranslation } from "react-i18next";
import { Link } from '@inertiajs/react';

const HorizontalLayout = (props: any) => {
    const [isMoreMenu, setIsMoreMenu] = useState<boolean>(false);

    // Memoizar el procesamiento del menú para evitar recálculos innecesarios
    const processedMenuData = useMemo(() => {
        const navData = navdata().props.children;
        let menuItems: any = [];
        let splitMenuItems: Array<any> = [];
        let menuSplitContainer = 6;
        
        navData.forEach((value: any, key: number) => {
            if (value['isHeader']) {
                menuSplitContainer++;
            }
            if (key >= menuSplitContainer) {
                let val = { ...value }; // Crear copia para evitar mutaciones
                val.childItems = value.subItems;
                val.isChildItem = value.subItems ? true : false;
                delete val.subItems;
                splitMenuItems.push(val);
            } else {
                menuItems.push(value);
            }
        });

        return { menuItems, splitMenuItems };
    }, [navdata]); // Solo recalcular si navdata cambia

    // Función memoizada para manejar el click del menú "More"
    const handleMoreMenuClick = useCallback((e: any) => {
        e.preventDefault();
        setIsMoreMenu(!isMoreMenu);
    }, [isMoreMenu]);

    // Crear el item "More" memoizado
    const moreMenuItem = useMemo(() => ({
        id: 'more',
        label: 'More',
        icon: 'ri-briefcase-2-line',
        link: "/#",
        stateVariables: isMoreMenu,
        subItems: processedMenuData.splitMenuItems,
        click: handleMoreMenuClick,
    }), [isMoreMenu, processedMenuData.splitMenuItems, handleMoreMenuClick]);

    // Menú final memoizado
    const finalMenuItems = useMemo(() => {
        return [...processedMenuData.menuItems, moreMenuItem];
    }, [processedMenuData.menuItems, moreMenuItem]);

    const path = window.location.pathname;

    // Memoizar funciones de manipulación del DOM para evitar recreación
    const removeActivation = useCallback((items: any) => {
        const actiItems = items.filter((x: any) => x.classList.contains("active"));

        actiItems.forEach((item: any) => {
            if (item.classList.contains("menu-link")) {
                if (!item.classList.contains("active")) {
                    item.setAttribute("aria-expanded", false);
                }
                if (item.nextElementSibling) {
                    item.nextElementSibling.classList.remove("show");
                }
            }
            if (item.classList.contains("nav-link")) {
                if (item.nextElementSibling) {
                    item.nextElementSibling.classList.remove("show");
                }
                item.setAttribute("aria-expanded", false);
            }
            item.classList.remove("active");
        });
    }, []);

    const activateParentDropdown = useCallback((item: any) => {
        item.classList.add("active");
        const parentCollapseDiv = item.closest(".collapse.menu-dropdown");

        if (parentCollapseDiv) {
            // to set aria expand true remaining
            parentCollapseDiv.classList.add("show");
            parentCollapseDiv.parentElement.children[0].classList.add("active");
            parentCollapseDiv.parentElement.children[0].setAttribute("aria-expanded", "true");
            
            if (parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown")) {
                parentCollapseDiv.parentElement.closest(".collapse").classList.add("show");
                const parentElementDiv = parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling;
                if (parentElementDiv) {
                    if (parentElementDiv.closest(".collapse")) {
                        parentElementDiv.closest(".collapse").classList.add("show");
                    }
                    parentElementDiv.classList.add("active");
                    const parentElementSibling = parentElementDiv.parentElement.parentElement.parentElement.previousElementSibling;
                    if (parentElementSibling) {
                        parentElementSibling.classList.add("active");
                    }
                }
            }
            return false;
        }
        return false;
    }, []);

    // Memoizar la función de inicialización del menú
    const initMenu = useCallback(() => {
        const pathName = path;
        const ul = document.getElementById("navbar-nav") as HTMLElement;
        if (!ul) return;
        
        const items: any = ul.getElementsByTagName("a");
        const itemsArray = [...items]; // converts NodeList to Array
        removeActivation(itemsArray);
        
        const matchingMenuItem = itemsArray.find((x) => x.pathname === pathName);
        if (matchingMenuItem) {
            activateParentDropdown(matchingMenuItem);
        }
    }, [path, removeActivation, activateParentDropdown]);

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        initMenu();
    }, [initMenu, props.layoutType]);
    return (
        <React.Fragment>
            {finalMenuItems.map((item: any, key: number) => {
                return (
                    <React.Fragment key={key}>
                        {/* Main Header */}
                        {!item['isHeader'] ?
                            (item.subItems ? (
                                <li className="nav-item">
                                    <Link
                                        onClick={item.click}
                                        className="nav-link menu-link"
                                        href={item.link ? item.link : "/#"}
                                        data-bs-toggle="collapse"
                                    >
                                        <i className={item.icon}></i> <span data-key="t-apps">{props.t(item.label)}</span>
                                    </Link>
                                    <Collapse
                                        className={item.id === "baseUi" && item.subItems.length > 13 ? "menu-dropdown mega-dropdown-menu" : "menu-dropdown"}
                                        in={item.stateVariables}
                                    >
                                        {/* subItms  */}
                                        {item.id === "baseUi" && item.subItems.length > 13 ? (
                                            <React.Fragment>
                                                <div className='menu-dropdown mega-dropdown-menu'>
                                                    <Row>
                                                        {item.subItems && ((item.subItems || []).map((subItem: any, key: number) => (
                                                            <React.Fragment key={key}>
                                                                {key % 2 === 0 ? (
                                                                    <Col lg={4}>
                                                                        <ul className="nav nav-sm flex-column">
                                                                            <li className="nav-item">
                                                                                <Link href={item.subItems[key].link} className="nav-link">{item.subItems[key].label}</Link>
                                                                            </li>
                                                                        </ul>
                                                                    </Col>
                                                                ) : (
                                                                    <Col lg={4}>
                                                                        <ul className="nav nav-sm flex-column">
                                                                            <li className="nav-item">
                                                                                <Link href={item.subItems[key].link} className="nav-link">{item.subItems[key].label}</Link>
                                                                            </li>
                                                                        </ul>
                                                                    </Col>
                                                                )
                                                                }
                                                            </React.Fragment>
                                                        ))
                                                        )}
                                                    </Row>
                                                </div>
                                            </React.Fragment>
                                        ) : (
                                            <ul className="nav nav-sm flex-column test">
                                                {item.subItems && ((item.subItems || []).map((subItem: any, key: number) => (
                                                    <React.Fragment key={key}>
                                                        {!subItem.isChildItem ? (
                                                            <li className="nav-item">
                                                                <Link
                                                                    href={subItem.link ? subItem.link : "/#"}
                                                                    className="nav-link"
                                                                >
                                                                    {props.t(subItem.label)}
                                                                </Link>
                                                            </li>
                                                        ) : (
                                                            <li className="nav-item">
                                                                <Link
                                                                    onClick={subItem.click}
                                                                    className="nav-link"
                                                                    href="/#"
                                                                    data-bs-toggle="collapse"
                                                                > {props.t(subItem.label)}
                                                                </Link>
                                                                <Collapse className="menu-dropdown" in={subItem.stateVariables} >
                                                                    <ul className="nav nav-sm flex-column" id="sidebarEcommerce">
                                                                        {/* child subItms  */}
                                                                        {subItem.childItems && (
                                                                            (subItem.childItems || []).map((subChildItem: any, key: number) => (
                                                                                <React.Fragment key={key}>
                                                                                    {!subChildItem.isChildItem ? (
                                                                                        <li className="nav-item">
                                                                                            <Link
                                                                                                href={subChildItem.link ? subChildItem.link : "/#"}
                                                                                                className="nav-link"
                                                                                            >
                                                                                                {props.t(subChildItem.label)}
                                                                                            </Link>
                                                                                        </li>
                                                                                    ) : (
                                                                                        <li className="nav-item">
                                                                                            <Link
                                                                                                onClick={subChildItem.click}
                                                                                                className="nav-link"
                                                                                                href="/#"
                                                                                                data-bs-toggle="collapse"
                                                                                            > {props.t(subChildItem.label)}
                                                                                            </Link>
                                                                                            <Collapse className="menu-dropdown" in={subChildItem.stateVariables} >
                                                                                                <ul className="nav nav-sm flex-column" id="sidebarEcommerce">
                                                                                                    {/* child subItms  */}
                                                                                                    {subChildItem.childItems && (
                                                                                                        (subChildItem.childItems || []).map((subSubChildItem: any, key: number) => (
                                                                                                            <li className="nav-item apex" key={key}>
                                                                                                                <Link
                                                                                                                    href={subSubChildItem.link ? subSubChildItem.link : "/#"}
                                                                                                                    className="nav-link"
                                                                                                                >
                                                                                                                    {props.t(subSubChildItem.label)}
                                                                                                                </Link>
                                                                                                            </li>
                                                                                                        ))
                                                                                                    )}
                                                                                                </ul>
                                                                                            </Collapse>
                                                                                        </li>
                                                                                    )}
                                                                                </React.Fragment>
                                                                            ))
                                                                        )}
                                                                    </ul>
                                                                </Collapse>
                                                            </li>
                                                        )}
                                                    </React.Fragment>
                                                ))
                                                )}
                                            </ul>
                                        )}
                                    </Collapse>
                                </li>
                            ) : (
                                <li className="nav-item">
                                    <Link
                                        className="nav-link menu-link"
                                        href={item.link ? item.link : "/#"}>
                                        <i className={item.icon}></i> <span>{props.t(item.label)}</span>
                                    </Link>
                                </li>
                            ))
                            : (<li className="menu-title"><span data-key="t-menu">{props.t(item.label)}</span></li>)}
                    </React.Fragment>
                );
            })}
            {/* menu Items */}
        </React.Fragment >
    );
};

HorizontalLayout.propTypes = {
    location: PropTypes.object,
    t: PropTypes.any,
};

export default withTranslation()(HorizontalLayout);