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

import {
  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";

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

  const projectID = useSelector((store) => store.localVariables.projectId);
  const { employeeId } = useParams();
  // const {employee,loading} = useEmployeeProfile(employeeId)
  const [loading, setLoading] = useState(true);

  const [SearchParams] = useSearchParams();
  const tab = SearchParams.get("for");
  const [activePill, setActivePill] = useState(tab || "profile");
  const [currentEmployee, setCurrentEmployee] = useState();
  const [showModal, setShowModal] = useState(false);

  const handlePillClick = (pillKey) => {
    setActivePill(pillKey);
  };

  const fetchEmployeeProfile = async (employeeID) => {
    try {
      const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
      setCurrentEmployee(resp.data);
      setLoading(false);
    } catch (err) {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (employeeId) {
      fetchEmployeeProfile(employeeId);
    }
  }, [employeeId]);

  const navigate = useNavigate();
  const renderContent = () => {
    if (loading) 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 (loading) {
    return <div>Loading...</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;
