import React, { useEffect, useRef } from "react";
import Menus from "./Menus";
import Actions from "./actions";
import HamburgerOpen from "../../assets/hamburger-close.svg";
import HamburgerClose from "../../assets/collapse-icon.svg";
import { useShortcut } from "../Shortcuts/useShortcut";
import "./Sidebar.styles.scss";

export const Sidebar = ({
  isOpen,
  setIsOpen,
  handleClose,
  routes,
  actionRoutes,
  parentActive,
  handleParentRouteChange,
  childActive,
  handleChildRouteChange,
  handleLogOut,
  isCloseWhenClickOutside = true,
  isMemoryRouter = true,
  visibleModulesCount,
}) => {
  const sidebarRef = useRef(null);

  useShortcut(
    [
      {
        keys: "mod+b",
        id: "sidebar-toggle-mod-b",
        description: "Toggle sidebar",
        handler: () => {
          setIsOpen((prev) => !prev);
        },
      },
      {
        keys: "alt+l",
        id: "sidebar-logout-alt-l",
        description: "Log out",
        handler: () => {
          handleLogOut?.();
        },
      },
    ],
    {
      namespace: "Sidebar",
      priority: 1,
      preventDefault: true,
    }
  );

  useEffect(() => {
    function handleClickOutside(event) {
      if (
        sidebarRef.current &&
        !sidebarRef.current.contains(event.target) &&
        isCloseWhenClickOutside
      ) {
        if (isOpen) {
          handleClose();
        }
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen, isCloseWhenClickOutside, handleClose, setIsOpen]);

  return (
    <nav
      ref={sidebarRef}
      className={`impact-sidebar-container ${isOpen ? "sidebar-open" : ""}`}
      aria-label="Main navigation"
    >
      <div
        className="impact-sidebar-toggle-btns"
        role="button"
        tabIndex={0}
        aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
        onClick={handleClose}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            handleClose();
          }
        }}
      >
        <img src={isOpen ? HamburgerClose : HamburgerOpen} alt="" />
      </div>
      <Menus
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        routes={routes}
        parentActive={parentActive}
        handleParentRouteChange={handleParentRouteChange}
        childActive={childActive}
        handleChildRouteChange={handleChildRouteChange}
        isMemoryRouter={isMemoryRouter}
        visibleModulesCount={visibleModulesCount}
      />
      <div className="impact-sidebar-actions-container">
        {actionRoutes && actionRoutes.length > 0 ? (
          <Menus
            isOpen={isOpen}
            setIsOpen={setIsOpen}
            routes={actionRoutes}
            parentActive={parentActive}
            handleParentRouteChange={handleParentRouteChange}
            childActive={childActive}
            handleChildRouteChange={handleChildRouteChange}
            isMemoryRouter={isMemoryRouter}
          />
        ) : null}
        <Actions open={isOpen} handleLogOut={handleLogOut} />
      </div>
    </nav>
  );
};
