import React from "react";
import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
import menuData from "../../data/menuData.json";
import {getCachedProfileData} from "../../slices/apiDataManager";

const Sidebar = () => {
  const logineUser = getCachedProfileData()
  const navigate = useNavigate()
  const handleLogout = (e) => {
    e.preventDefault(); 
    // logout();
  };

  const handleProfilePage = ()=>{
    console.log(profile?.employeeInfo?.id)
    navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
  }
  return (
    <aside
      id="layout-menu"
      className="layout-menu menu-vertical menu bg-menu-theme "
    >
      <div className="app-brand demo">
        <Link to="/dashboard" className="app-brand-link">
          <span className="app-brand-logo  demo">
            <img
              className="app-brand-logo-sidebar"
              src="/img/brand/marco.png"
              alt="logo"
              aria-label="logo image"
            />
          </span>
          <span className="app-brand-text demo menu-text fw-bold ms-2">
            PMS
          </span>
        </Link>

        <a
          
          className="layout-menu-toggle menu-link text-large ms-auto"
        >
          <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
        </a>
      </div>

      <div className="menu-inner-shadow"></div>

      <ul className="menu-inner py-1">
        {menuData.map((section) => (
          <React.Fragment key={(Math.random() + 1).toString(36)}>
            {section.header && (
              <li className="menu-header small text-uppercase">
                <span className="menu-header-text">{section.header}</span>
              </li>
            )}
            {section.items.map(MenuItem)}
          </React.Fragment>
        ))}
      </ul>

      <div className="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-shrink-1 ps-5">
        <a
          href="#"
          className="d-flex align-items-center  text-decoration-none dropdown-toggle"
          id="dropdownUser1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <img
            src="https://github.com/mdo.png"
            alt="hugenerd"
            width="28"
            height="28"
            className="rounded-circle"
          />
          <span className="d-none d-sm-inline mx-1">{ logineUser?.employeeInfo?.firstName}</span>
        </a>
        <ul className="dropdown-menu dropdown-menu-end">
          <li onClick={handleProfilePage}>
            <a aria-label="go to profile" className="dropdown-item">
              <div className="d-flex">
                <div className="flex-shrink-0 me-3">
                  <div className="avatar avatar-online">
                    <img
                      src="../assets/img/avatars/00.jpg"
                      className="w-px-40 h-auto rounded-circle"
                      alt="avatar-image"
                      aria-label="Avatar Image"
                    />
                  </div>
                </div>
                <div className="flex-grow-1">
                  <span className="fw-medium d-block">{ logineUser?.employeeInfo?.firstName}</span>
                  <small className="text-muted">Admin</small>
                </div>
              </div>
            </a>
          </li>
          <li>
            <div className="dropdown-divider"></div>
          </li>
          <li onClick={handleProfilePage}>
            <a aria-label="go to profile" className="dropdown-item" >
              <i className="bx bx-user me-2"></i>
              <span className="align-middle">My Profile</span>
            </a>
          </li>
          <li>
            <a aria-label="go to setting" className="dropdown-item" href="#">
              <i className="bx bx-cog me-2"></i>
              <span className="align-middle">Settings</span>
            </a>
          </li>
          <li>
            <a aria-label="go to billing" className="dropdown-item" href="#">
              <span className="d-flex align-items-center align-middle">
                <i className="flex-shrink-0 bx bx-credit-card me-2"></i>
                <span className="flex-grow-1 align-middle ms-1">Billing</span>
                <span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
                  4
                </span>
              </span>
            </a>
          </li>
          <li>
            <div className="dropdown-divider"></div>
          </li>
          <li>
            <a
              aria-label="click to log out"
              className="dropdown-item"
              href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
              onClick={handleLogout}
            >
              <i className="bx bx-power-off me-2"></i>
              <span className="align-middle">Log Out</span>
            </a>
          </li>
        </ul>
      </div>
    </aside>
  );
};

const MenuItem = (item) => {
  item.id = Math.random();
  const location = useLocation();
  const isActive = location.pathname === item.link;
  const hasSubmenu = item.submenu && item.submenu.length > 0;
  const isSubmenuActive =
    hasSubmenu &&
    item.submenu.some((subitem) => location.pathname === subitem.link);

  return (
    <li
      key={(Math.random() + 1).toString(36)}
      className={`menu-item ${isActive || isSubmenuActive ? "active" : ""} ${
        hasSubmenu && isSubmenuActive ? "open" : ""
      }`}
    >
      <NavLink
        aria-label={`Navigate to ${item.text} ${!item.available ? "Pro" : ""}`}
        to={item.link}
        className={`menu-link ${item.submenu ? "menu-toggle" : ""}`}
        key={(Math.random() + 1).toString(36)}
        target={item.link.includes("http") ? "_blank" : undefined}
      >
        <i className={`menu-icon tf-icons ${item.icon}`}></i>
        <div>{item.text}</div>{" "}
        {item.available === false && (
          <div className="badge bg-label-primary fs-tiny rounded-pill ms-auto">
            Pro
          </div>
        )}
      </NavLink>
      {item.submenu && (
        <ul className="menu-sub" key={(Math.random() + 1).toString(36)}>
          {item.submenu.map(MenuItem)}
        </ul>
      )}
    </li>
  );
};

export default Sidebar;
