import React, { useEffect, useState } from "react";
import EmpOverview from "./EmpOverview";
import { useProjectsAllocationByEmployee } from "../../hooks/useProjects";

const EmpDashboard = ({ profile }) => {
  const {
    projectList,
    loading: selectedProjectLoding,
    refetch,
  } = useProjectsAllocationByEmployee(profile?.id);

  return (
    <>
      <div className="row">
        <div className="col-12 col-sm-6 pt-5">
          {" "}
          <EmpOverview profile={profile}></EmpOverview>
        </div>
        <div className="col col-sm-6 pt-5">
          <div className="card ">
            <div className="card-body">
              <small className="card-text text-uppercase text-body-secondary small text-start d-block">
                My Projects
              </small>
              <ul className="list-unstyled text-start my-3 py-1">
                {selectedProjectLoding && <span>Loading</span>}
                {projectList.map((project) => (
                  <li
                    className="d-flex mb-4 align-items-start flex-wrap"
                    key={project.id}
                  >
                    {/* Project Info */}
                    <div className="flex-grow-1">
                      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div className="d-flex">
                          <div className="avatar flex-shrink-0 me-3">
                            <span
                              className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
                                }`}
                            >
                              <i className="icon-base bx bx-buildings icon-lg"></i>
                            </span>

                          </div>
                          <div>
                            <h6 className="mb-0">{project.projectShortName}</h6>
                            <small className="text-muted">{project.projectName}</small>
                            <div className="label-secondary">
                              Assigned:{" "}
                              {project.assignedDate ? (
                                new Date(project.assignedDate).toLocaleDateString()
                              ) : (
                                <em>NA</em>
                              )}
                            </div>
                            {project.removedDate && (
                              <div className="mt-0 d-flex flex-column flex-sm-row justify-content-between">
                                <div className="label-secondary">
                                  Unassigned:{" "}
                                  {new Date(project.removedDate).toLocaleDateString()}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                        <div>
                          <span className="badge bg-label-secondary">
                            {project.designation}
                          </span>
                        </div>
                      </div>

                      {/* Dates */}

                    </div>
                  </li>
                ))}
              </ul>

            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default EmpDashboard;
