import React,{useState,useEffect} from "react";
import EmpProfile from "../../components/Employee/EmpProfile";
import axios from "axios";
import Breadcrumb from "../../components/common/Breadcrumb";
import EmployeeNav from "../../components/Employee/EmployeeNav";
import { useSearchParams,useParams } from "react-router-dom";
import { getCachedData } from "../../slices/apiDataManager";
import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees";
import { useSelector } from "react-redux";
import EmployeeRepository from "../../repositories/EmployeeRepository";


const EmployeeProfile = () => {
 
  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);
  const[currentEmployee,setCurrentEmployee] = useState()

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

 const fetchEmployeeProfile = async( employeeID ) =>
  {
    try
    {
      const resp = await EmployeeRepository.getEmployeeProfile( employeeID )
      setCurrentEmployee( resp.data )
      setLoading(false)
      
    } catch ( err )
    {
      console.log( "Faild to fetch employee data,", err )
      setLoading(false)
      
    }
 }

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


  const renderContent = () => {
    if (loading) return <div>Loading</div>;
    switch (activePill) {
      case "account": {
        return (
          <div className="row">
            {/* <div className="col-xl-4 col-lg-5 col-md-5"> */}
              <p>Account</p>
            {/* </div> */}
         
          </div>
        );
      }
      case "attendance": {
        return (
          <div className="row">
            <div className="col-lg-12 col-xl-12">
              {/* Teams */}
             <p>attendance component</p>
              {/* Teams */}
            </div>
          </div>
        );
        break;
      }
      case "activities": {
        return (
         <p>activites components</p>
        );
        break;
      }

      default:
        return  <div className="misc-wrapper">
        <h2 className="mb-2 mx-2">Coming Soon!</h2>
        <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
        Thank you for your patience!</p>
        <div className="mt-4">
            <img
                src="../assets/img/illustrations/girl-doing-yoga-light.png"
                alt="girl-doing-yoga-light"
                aria-label="Girl doing yoga light"
                width="500"
                className="img-fluid"
                data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
                data-app-light-img="illustrations/girl-doing-yoga-light.png" />
        </div>
    </div>;
    }
  };

 

  if (loading) {
    return <div>Loading...</div>;
  }

 
  return (
    <div className="container-xxl flex-grow-1 container-p-y">
      <Breadcrumb
        data={[
          { label: "Home", link: "/dashboard" },
          { label: "Employees", link: "/employees" },
          { label: "Profile", link: null },
        ]}
      ></Breadcrumb>

   <div className="row">
      <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
        <div className="row">
          <div className="col-12 mb-4">
            <div className="card">
              <div className="card-body">
                <div className="d-flex flex-row flex-lg-column">
                  <div className="d-flex flex-column justify-content-center align-items-center text-center">
                    <img
                      src={`../../../public/img/avatars/${currentEmployee.gender}.jpg`}
                      alt="user-avatar"
                      className="d-block rounded"
                      height="100"
                      width="100"
                      aria-label="Account image"
                      id="uploadedAvatar"
                    />
                    <div className="py-2">
                      <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
                    </div>
                    <hr className="my-2" />
                  </div>
                  <div className="w-100 d-flex flex-row flex-sm-column justify-content-sm-start justify-content-around">
                    <div className="text-wrap">
                      <small className="card-text text-uppercase text-muted small">Contacts</small>
                      <ul className="list-unstyled my-3 py-1">
                       
                        <li className="d-flex align-items-center mb-4">
                          <i className="bx bx-phone"></i>
                          <span className="fw-medium mx-2">Contact Number:</span>
                          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
                            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
                          </span>
                        </li>
                        <li className="d-flex align-items-center mb-4 text-start">
                          <i className="bx bx-envelope"></i>
                          <span className="fw-medium mx-2">Email:</span>
                          <span className={`text-break text-wrap ${currentEmployee?.email ? "" : "text-muted"}`}>
                            {currentEmployee?.email || <em className="muted">NA</em>}
                          </span>
                          </li>
                          <li className="d-flex align-items-center mb-4">
                          <i className="bx bx-user"></i>
                          <span className="fw-medium mx-2">Contact Person:</span>
                          <span className="">
                            {currentEmployee?.emergencyContactPerson}
                          </span>
                        </li>
                        <li className="d-flex align-items-center  text-wrap ">
                        <i className="bx bx-flag"></i>
                         <span className="fw-medium mx-2">Address:</span>
                         
                        </li>
                        <li className="d-flex align-items-start test-start mb-2">
                          <span className={`${currentEmployee?.permanentAddress ? "" : "ms-4"}`}>
                          {currentEmployee?.peramnentAddress}
                          </span>
                        </li>
                       
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
        <div className="row">
          <EmployeeNav onPillClick={handlePillClick} activePill={activePill} />
        </div>
        <div className="card">
          <div className="row row-bordered g-0">
            {renderContent()} 
          </div>
        </div>
      </div>
    </div>
    </div>
  );
};

export default EmployeeProfile;