import React, { useState, useEffect } from "react";
import { useSearchParams, useParams, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";

import {
  useEmployee,
  useEmployeeProfile,
  useEmployees,
  useEmployeesByProject,
} from "../../hooks/useEmployees";
import { useProfile } from "../../hooks/useProfile";
import { getCachedData } from "../../slices/apiDataManager";

import EmployeeRepository from "../../repositories/EmployeeRepository";
import { ComingSoonPage } from "../Misc/ComingSoonPage";

import Breadcrumb from "../../components/common/Breadcrumb";
import EmployeeNav from "../../components/Employee/EmployeeNav";
import EmpProfile from "../../components/Employee/EmpProfile";
import EmpAttendance from "../../components/Employee/EmpAttendance";
import ManageEmployee from "../../components/Employee/ManageEmployee";
import EmpBanner from "../../components/Employee/EmpBanner";
import EmpDashboard from "../../components/Employee/EmpDashboard";
import EmpDocuments from "../../components/Employee/EmpDocuments";
import EmpActivities from "../../components/Employee/EmpActivities";
import { setProjectId } from "../../slices/localVariablesSlice";

const EmployeeProfile = () => {
  const { profile } = useProfile();

  const projectID = useSelector((store) => store.localVariables.projectId);

  const { employeeId } = useParams();
  const dispatch = useDispatch();

  const [SearchParams] = useSearchParams();
  const tab = SearchParams.get("for");
  const [activePill, setActivePill] = useState(tab || "profile");
  const [showModal, setShowModal] = useState(false);
  const {
    data: currentEmployee,
    isLoading,
    isError,
    error,
  } = useEmployee(employeeId);
  const handlePillClick = (pillKey) => {
    setActivePill(pillKey);
  };

  useEffect(() => {
    dispatch(setProjectId(null));
  }, [projectID]);

  const navigate = useNavigate();
  const renderContent = () => {
    if (isLoading) return <div>Loading</div>;
    switch (activePill) {
      case "profile": {
        return (
          <>
            <EmpDashboard profile={currentEmployee} />
          </>
        );
      }
      case "attendance": {
        return (
          <>
            <EmpAttendance employee={employeeId} />
          </>
        );
      }
      case "documents": {
        return (
          <>
            <EmpDocuments />
          </>
        );
        break;
      }
      case "activities": {
        return (
          <>
            <EmpActivities employee={currentEmployee} />
          </>
        );
        break;
      }

      default:
        return (
          <>
            <ComingSoonPage />
          </>
        );
    }
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) return <div>{error.message}</div>;
  return (
    <>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Employees", link: "/employees" },
            { label: "Profile", link: null },
          ]}
        ></Breadcrumb>
        <div className="row">
          <div className="col-12 ">
            <EmpBanner
              profile={currentEmployee}
              loggedInUser={profile}
            ></EmpBanner>
          </div>
        </div>{" "}
        <div className="row">
          <div className="col-12 ">
            <EmployeeNav
              onPillClick={handlePillClick}
              activePill={activePill}
            />
          </div>
        </div>
        <div className="row">
          <div className=" ">{renderContent()}</div>
        </div>
      </div>
    </>
  );
};

export default EmployeeProfile;