"use client";

import DashboardIcon from "@mui/icons-material/Dashboard";
import { ElementType, useState } from "react";
import PageLinks from "../../../components/PageLinks/PageLinks";
import "./sideBar.scss";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { selectNavigationSidebar } from "@/app/redux/metadata/selectors";
import { useSelector } from "react-redux";
import { SidebarItem } from "@/app/redux/metadata/metadataSlice";
import { resolveIcon } from "@/app/utils/iconMap";

interface SidebarProps {
  isOpen?: boolean;
  onClose?: () => void;
}

const SideBar = ({ isOpen = true, onClose }: SidebarProps) => {
  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
  const sidebar = useSelector(selectNavigationSidebar)[0]?.links;
  const toggleMenu = (title: string) => {
    setOpenMenus(prev => ({ ...prev, [title]: !prev[title] }));
  };

  return (
    <aside className={`sidebar ${!isOpen ? "sidebar--collapsed" : ""}`}>
      <button className="sidebar__toggle-button" onClick={onClose}>
        {isOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
      </button>
      <div className="sidebar__header">
        <span>
          Betrise cashier
          <DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
        </span>
      </div>

      {sidebar?.map((link: SidebarItem) => {
        if (link.children) {
          const Icon = resolveIcon(link.icon as string);
          return (
            <div key={link.title}>
              <button
                onClick={() => toggleMenu(link.title)}
                className="sidebar__dropdown-button"
              >
                {Icon && <Icon />}
                <span className="sidebar__text">{link.title}</span>
                <span className="sidebar__arrow">
                  {openMenus[link.title] ? (
                    <KeyboardArrowDownIcon />
                  ) : (
                    <KeyboardArrowRightIcon />
                  )}
                </span>
              </button>

              {openMenus[link.title] && (
                <div className="sidebar__submenu">
                  {link.children.map(child => (
                    <PageLinks
                      key={child.path}
                      title={child.title}
                      path={child.path}
                      icon={child.icon as ElementType}
                    />
                  ))}
                </div>
              )}
            </div>
          );
        }

        // Render simple links if no children
        return (
          <PageLinks
            key={link.path}
            title={link.title}
            path={link.path}
            icon={link.icon as ElementType}
          />
        );
      })}
    </aside>
  );
};

export default SideBar;