import React, { useState, useRef } from "react";
import { NavLink } from "react-router-dom";
import { SideMenuContainer, NavWrapper } from "./index.styled";
// import { adminSideMenuOptions } from '../../hooks/adminSideMenuItems';
import logo from "./assets/images/logo.png";
// import { ChevronIconActive } from './assets/svg/chevronIcon';
// import cx from 'classnames';
import { LogoutIcon } from "./assets/svg/logoutIcon";
import {
  adminCMSItems,
  adminSupportItems,
  adminAnalyticsItem,
} from "../../hooks/adminSideMenuRoutes";
import NavItem from "./navItem";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminSideMenu = ({ type }) => {
  const { findText } = useTranslation(wordStore);
  const [activeDropdown, setActiveDropdown] = useState(null);
  const ref = useRef(null);
  const handleToggle = (item) => {
    if (
      activeDropdown?.index === item?.index &&
      activeDropdown?.type === item?.type
    ) {
      setActiveDropdown(null);
    } else {
      setActiveDropdown(item);
    }
  };
  return (
    <SideMenuContainer>
      <div className="logo_section">
        <img src={logo} alt="" />
      </div>

      <NavWrapper>
        {type === "analytics"
          ? adminAnalyticsItem?.map((item, idx) => (
              <NavItem
                item={item}
                idx={idx}
                bodyRef={ref}
                handleToggle={handleToggle}
                activeDropdown={activeDropdown}
              />
            ))
          : type === "support"
          ? adminSupportItems?.map((item, idx) => (
              <NavItem
                item={item}
                idx={idx}
                bodyRef={ref}
                handleToggle={handleToggle}
                activeDropdown={activeDropdown}
              />
            ))
          : adminCMSItems?.map((item, idx) => (
              <NavItem
                item={item}
                idx={idx}
                bodyRef={ref}
                handleToggle={handleToggle}
                activeDropdown={activeDropdown}
              />
            ))}

        <NavLink to={findText("/")} className="logout__link">
          <LogoutIcon />
          {findText("Logout")}
        </NavLink>
      </NavWrapper>
    </SideMenuContainer>
  );
};
export default AdminSideMenu;
