import React from "react";
import {
  DIRECTORY_ADMIN,
  DIRECTORY_MANAGER,
  DIRECTORY_USER,
  MANAGE_PROJECT_INFRA,
  MANAGE_TASK,
  MANAGE_TEAM,
  MODIFY_DOCUMENT,
  UPLOAD_DOCUMENT,
  VIEW_DOCUMENT,
  VIEW_PROJECT_INFRA,
} from "../../utils/constants";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";

const ProjectNav = ({ onPillClick, activePill }) => {
  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
  const HasManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
  const HasManageTask = useHasUserPermission(MANAGE_TASK)
  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
  const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
  const DirUser = useHasUserPermission(DIRECTORY_USER);
  const isManageTeam = useHasUserPermission(MANAGE_TEAM)
  const isViewDocuments = useHasUserPermission(VIEW_DOCUMENT);
  const isUploadDocument = useHasUserPermission(UPLOAD_DOCUMENT)
  const isModifyDocument = useHasUserPermission(MODIFY_DOCUMENT)

  const ProjectTab = [
    { key: "profile", icon: "bx bx-user", label: "Profile" },
    { key: "teams", icon: "bx bx-group", label: "Teams" },
    {
      key: "infra",
      icon: "bx bx-grid-alt",
      label: "Infrastructure",
      hidden: !(HasViewInfraStructure || HasManageInfra || HasManageTask),
    },
    {
      key: "directory",
      icon: "bx bxs-contact",
      label: "Directory",
      hidden: !(DirAdmin || DireManager || DirUser),
    },
    { key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
    { key: "organization", icon: "bx bx-buildings", label: "Organization"},
    { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
  ];
  return (
    <div className="nav-align-top">
      <ul className="nav nav-tabs">
        {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
          <li key={tab.key} className="nav-item cursor-pointer">
            <a
             
              className={`nav-link ${
                activePill === tab.key ? "active cursor-pointer" : ""
              } fs-6`}
              onClick={(e) => {
                e.preventDefault();
                onPillClick(tab.key);
              }}
            >
              <i className={`${tab.icon} bx-sm me-1_5`}></i>
              <span className="d-none d-md-inline  ">{tab.label}</span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProjectNav;