import React, { useState } from "react";
import "./sidebar-navigation-styles.scss";
import NavItem from "../nav-item/NavItem";
import { SidebarNavigationProps } from "@app/models/components";
import {
  CloseIcon,
  DatasetLinkedIcon,
  MenuIcon,
  SettingsIcon,
} from "@app/assets/images/icons";
import { useSettings } from "@settings/contexts/SettingsContext";

const SidebarNavigation: React.FC<SidebarNavigationProps> = ({
  isMobileView,
}) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const { initialSettings, noConfig } = useSettings();

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const handleNavLinkClick = () => {
    setIsMenuOpen(false);
  };

  return (
    <nav>
      <div
        className={`sidebar-navigation ${
          isMobileView ? "sidebar-navigation-mobile" : ""
        }`}
      >
        <header>
          <h1>Top Posts</h1>
          {isMobileView && <span></span>}
          <h2>Plugin</h2>
        </header>
        {isMobileView && (
          <button onClick={toggleMenu} className="menu-icon">
            {isMenuOpen ? CloseIcon : MenuIcon}
          </button>
        )}
        <div
          className={`menu-list-container ${
            isMenuOpen ? "show-container" : ""
          }`}
        >
          <ul className="sidebar-menu-list">
            <li className="sidebar-menu-item">
              <NavItem
                onClick={handleNavLinkClick}
                to="/top-posts-manager"
                icon={DatasetLinkedIcon}
                text="Top Posts Manager"
                disabled={noConfig}
              ></NavItem>
            </li>
            <li className="sidebar-menu-item">
              <NavItem
                onClick={handleNavLinkClick}
                to="/configuration"
                icon={SettingsIcon}
                text="Configuration"
                disabled={!topPostsRestAPI?.isAdmin}
              ></NavItem>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default SidebarNavigation;