import React from "react";
import { hasUserPermission } from "../../utils/authUtils";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { DIRECTORY_ADMIN, DIRECTORY_MANAGER, DIRECTORY_USER, VIEW_PROJECT_INFRA } from "../../utils/constants";

const ProjectNav = ({ onPillClick, activePill }) => {
  const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA );
  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
  const DireManager = useHasUserPermission(DIRECTORY_MANAGER)
  const DirUser = useHasUserPermission(DIRECTORY_USER)

  return (
    <div className="nav-align-top">
      <ul className="nav nav-tabs ">
        <li className="nav-item">
          <a
            className={`nav-link ${activePill === "profile" ? "active" : ""}`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); 
              onPillClick("profile");
            }}
          >
            <i className="bx bx-user bx-sm me-1_5"></i> <span className="d-none d-md-inline">Profile</span>
          </a>
        </li>
        <li className="nav-item">
          <a
            className={`nav-link ${activePill === "teams" ? "active" : ""}`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); 
              onPillClick("teams");
            }}
          >
            <i className="bx bx-group bx-sm me-1_5"></i><span className="d-none d-md-inline" > Teams</span>
          </a>
        </li>
        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
          <a
            className={`nav-link ${activePill === "infra" ? "active" : ""}`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); 
              onPillClick("infra");
            }}
          >
            <i className="bx bx-grid-alt bx-sm me-1_5"></i> <span className="d-none d-md-inline">Infrastructure</span>
          </a>
        </li>
      
        <li className="nav-item">
          <a
            className={`nav-link ${
              activePill === "imagegallary" ? "active" : ""
            }`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); // Prevent page reload
              onPillClick("imagegallary");
            }}
          >
            <i className="bx bxs-file-image bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
          </a>
        </li>
        {(DirAdmin || DireManager || DirUser) && (
            <li className="nav-item">
          <a
            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); // Prevent page reload
              onPillClick("directory");
            }}
          >
           <i className='bx bxs-contact bx-sm me-1_5'></i> <span className="d-none d-md-inline">Directory</span>
          </a>
        </li>
        )}
      
      </ul>
    </div>
  );
};

export default ProjectNav;