"use client"
import {List} from "@mui/material";
import SidebarListItems from "@/core/components/SidebarListItems";
import {useEffect, useReducer, useState} from "react";
import {usePathname} from 'next/navigation'
import SecurityIcon from '@mui/icons-material/Security';
import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
import AssessmentIcon from '@mui/icons-material/Assessment';
import AirlineSeatReclineNormalIcon from "@mui/icons-material/AirlineSeatReclineNormal";
import RepartitionIcon from '@mui/icons-material/Repartition';

const data = [
    {
        id: "hello",
        type: "menu",
        route: "/hello",
        icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
        selected: false,
        Subitems: [
            {
                id: "amin",
                route: "/s",
                icon: <SpaceDashboardIcon sx={{width: 'inherit', height: 'inherit'}}/>,
                firstName: "amin",
                lastName: "ali",
                Subitems: [
                    {
                        id: "shahrokh", shahrokh: "shahrokh", type: "page", selected: false, route: "/dashbssoard", icon: <AssessmentIcon sx={{width: 'inherit', height: 'inherit'}}/>
                    },
                    {
                        id: "shasdasdsahrokh", shahrokh: "shahroasdasdkh", type: "page", selected: false, route: "/dashboardsd", icon: <AirlineSeatReclineNormalIcon sx={{width: 'inherit', height: 'inherit'}}/>
                    }
                ],
                hasSubitems: true,
                showSubitems: false,
                type: "menu",
                selected: false,
            },
            {
                id: "amir",
                route: "/dashboarsad",
                icon: <RepartitionIcon sx={{width: 'inherit', height: 'inherit'}}/>,
                firstName: "amir",
                lastName: "akbar",
                hasSubitems: false,
                showSubitems: false,
                selected: false,
                type: "page",
            },
        ],
        hasSubitems: true,
        showSubitems: false
    },
    {
        id: "hi",
        type: "menu",
        icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
        route: "/hi",
        selected: false,
        Subitems: [
            {
                id: "ali",
                route: "/dashboardss",
                firstName: "ali",
                lastName: "ali",
                icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
                hasSubitems: false,
                showSubitems: false,
                type: "page",
                selected: false,
            },
            {
                id: "akbar",
                route: "/akbar",
                firstName: "akbar",
                icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
                lastName: "akbar",
                hasSubitems: false,
                showSubitems: false,
                type: "page",
                selected: false,
            },
        ],
        hasSubitems: true,
        showSubitems: false
    },
    {
        id: "hoo",
        type: "page",
        route: "/dashboard",
        icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
        selected: false,
        hasSubitems: false,
        showSubitems: false
    }
]

function reducer(state, action) {
    switch (action.type) {
        case "COLLAPSE_MENU":
            return state.map((item) => action.id == item.id ? {
                ...item, showSubitems: !item.showSubitems
            } : item)
        case "COLLAPSE_SUB_ITEMS" :
            return state.map((item) => {
                return item.hasSubitems ? {
                    ...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
                        ...subitem, showSubitems: !subitem.showSubitems
                    } : subitem)
                } : item
            })
        case "COLLAPSE_SUB_SECOND_ITEMS" :
            return state.map((item) => {
                return item.hasSubitems ? {
                    ...item, Subitems: item.Subitems.map((subitem) => {
                        return subitem.hasSubitems ? {
                            ...subitem,
                            Subitems: subitem.Subitems.map((secondSubitem) => action.id === secondSubitem.id ? {
                                ...secondSubitem, showSubitems: !secondSubitem.showSubitems
                            } : secondSubitem)
                        } : subitem
                    })
                } : item
            })
        case "SELECTED":
            return state.map((item) => {
                return item.type === "page" ? {
                    ...item, selected: action.route === item.route,showSubitems: item.route === action.route
                } : item.Subitems && Array.isArray(item.Subitems) ? {
                    ...item, Subitems: item.Subitems.map((subitem) => {
                        return subitem.type === "page" ? {
                            ...subitem, selected: action.route === subitem.route,showSubitems: subitem.route === action.route
                        } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
                            ...subitem, Subitems: subitem.Subitems.map((secondSubItem) => ({
                                ...secondSubItem, selected: secondSubItem.route === action.route
                            })),showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
                        } : subitem
                    }),showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
                } : item
            });
        // case "SELECTED":
        //     return state.map((item) => {
        //         return item.type === "page" ? {
        //             ...item,
        //             selected: action.route === item.route
        //         } : item.Subitems && Array.isArray(item.Subitems) ? {
        //             ...item,
        //             Subitems: item.Subitems.map((subitem) => {
        //                 const updatedSubitem = subitem.type === "page" ? {
        //                     ...subitem,
        //                     selected: action.route === subitem.route
        //                 } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
        //                     ...subitem,
        //                     Subitems: subitem.Subitems.map((secondSubItem) => ({
        //                         ...secondSubItem,
        //                         selected: secondSubItem.route === action.route
        //                     })),
        //                     showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
        //                 } : subitem;
        //
        //                 console.log("Updated subitem:", updatedSubitem); // Log the updated subitem
        //                 return updatedSubitem;
        //             }),
        //             showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
        //         } : item
        //     });


        default:
            throw new Error();
    }
}

const SidebarMenu = () => {
    const [menuItems, dispatch] = useReducer(reducer, data);
    const pathname = usePathname()
    const [selectedKey, setSelectedKey] = useState(null);
    useEffect(() => {
        dispatch({type: "SELECTED", route: pathname});
        setSelectedKey(pathname);
    }, [pathname]);

    useEffect(() => {
        selectedKey && document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
            behavior: "smooth", block: "center"
        });
    }, [selectedKey]);

    return (
        <List disablePadding>
            {
                menuItems.map((menuItem) => {
                    return (
                        <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem}/>
                    )
                })
            }
        </List>
    )
}
export default SidebarMenu