import React, { useCallback, useEffect, useState } from "react";
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
import eventBus from "../../services/eventBus";
import GlobalRepository from "../../repositories/GlobalRepository";

const Projects = () => {
  const { projectsCardData } = useDashboardProjectsCardData();
  const [projectData, setProjectsData] = useState(projectsCardData);

  useEffect(() => {
    setProjectsData(projectsCardData);
  }, [projectsCardData]);

  const handler = useCallback(
    async (msg) => {
        try {
          const response =
            await GlobalRepository.getDashboardProjectsCardData();
          setProjectsData(response.data);
        } catch (err) {
          console.error(err);
        }
    },
    [GlobalRepository]
  );

  useEffect(() => {
    eventBus.on("project", handler);
    return () => eventBus.off("project", handler);
  }, [handler]);

  return (
    <div className="card p-3 h-100 text-center d-flex justify-content-between">
      <div className="d-flex justify-content-start align-items-center mb-3">
        <h5 className="fw-bold mb-0 ms-2">
          <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
          Projects
        </h5>
      </div>
      <div className="d-flex justify-content-around align-items-start mt-n2">
        <div>
          <h4 className="mb-0 fw-bold">
            {projectData.totalProjects?.toLocaleString()}
          </h4>
          <small className="text-muted">Total</small>
        </div>
        <div>
          <h4 className="mb-0 fw-bold">
            {projectData.ongoingProjects?.toLocaleString()}
          </h4>
          <small className="text-muted">Ongoing</small>
        </div>
      </div>
    </div>
  );
};

export default Projects;