import React, { useEffect, useState } from "react";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { VIEW_DOCUMENT } from "../../utils/constants";
import { useProfile } from "../../hooks/useProfile";
import { useParams } from "react-router-dom";
const EmployeeNav = ({ onPillClick, activePill }) => {
 const { employeeId } = useParams();
  const [isAbleToViewDocuments, setIsAbleToViewDocuments] = useState(false);

  const canViewDocuments = useHasUserPermission(VIEW_DOCUMENT);
  const { profile } = useProfile();

  useEffect(() => {
    if (profile?.employeeInfo?.id) {
      setIsAbleToViewDocuments(profile.employeeInfo.id === employeeId);
    }
  }, [profile?.employeeInfo?.id, employeeId]);

  const tabs = [
    { key: "profile", icon: "bx bx-user", label: "Profile" },
    { key: "attendance", icon: "bx bx-group", label: "Attendances" },
    (isAbleToViewDocuments || canViewDocuments) && {
      key: "documents",
      icon: "bx bx-file",
      label: "Documents",
    },
    // { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
  ].filter(Boolean);
  return (
    <div className="col-md-12">
      <div className="nav-align-top">
        <ul className="nav nav-tabs overflow-auto" id="horizontal-example">
          {tabs.map(({ key, icon, label }) => (
            <li
              key={key}
              className="nav-item"
              style={{ padding: "10px 10px 0 10px" }}
            >
              <a
                href="#"
                className={`nav-link py-1 px-2 small ${
                  activePill === key ? "active" : ""
                }`}
                onClick={(e) => {
                  e.preventDefault();
                  onPillClick(key);
                }}
              >
                <i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default EmployeeNav;