import React, { useState, useEffect } from "react";
import ManageProjectInfo from "./ManageProjectInfo";
import showToast from "../../services/toastService";
import ProjectRepository from "../../repositories/ProjectRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import { hasUserPermission } from "../../utils/authUtils";
import moment from "moment";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";

const ProjectBanner = ({ project_data }) => {
  const [showModal, setShowModal] = useState(false);
  const manageProject = useHasUserPermission(MANAGE_PROJECT);
  const [CurrentProject, setCurrentProject] = useState(project_data);

  if (project_data == null) {
    return <span>incomplete project information</span>;
  }

  useEffect(() => {
    setCurrentProject(project_data);
  }, [project_data]);

  const handleShow = () => setShowModal(true);
  const handleClose = () => setShowModal(false);

  const handleFormSubmit = (updatedProject, setLoading) => {
    if (CurrentProject?.id) {
      ProjectRepository.updateProject(CurrentProject.id, updatedProject)
        .then((response) => {
          const updatedProjectData = {
            ...CurrentProject,
            ...response.data,
            building: CurrentProject.building,
          };
          setCurrentProject(updatedProject);

          cacheData(`projectinfo-${CurrentProject.id}`, updatedProjectData);
          const projects_list = getCachedData("projectslist");
          if (projects_list) {
            const updatedProjectsList = projects_list.map((project) =>
              project.id === CurrentProject.id
                ? {
                    ...project,
                    ...response.data,
                    //  tenant:project.tenant
                  }
                : project
            );

            cacheData("projectslist", updatedProjectsList);
          }

          showToast("Project updated successfully.", "success");
          setLoading(false);
          setShowModal(false);
        })
        .catch((error) => {
          showToast(error.message, "error");
        });
    }
  };

  return (
    <>
      <div
        className={`modal fade ${showModal ? "show" : ""}`}
        tabIndex="-1"
        role="dialog"
        style={{ display: showModal ? "block" : "none" }}
        aria-hidden={!showModal}
      >
        <ManageProjectInfo
          project={CurrentProject}
          handleSubmitForm={handleFormSubmit}
          onClose={handleClose}
        ></ManageProjectInfo>
      </div>
      {/* Project Banner */}
      <div className="col-12">
        <div className="card mb-6 pb-0">
          <div className="d-flex align-items-center justify-content-between p-2 flex-wrap">
            {/* Left: Icon + Name */}
            <div className="d-flex align-items-center gap-3">
              <img
                src="../../assets/icons/civil-engineering.svg"
                alt="user image"
                className="rounded-3"
                style={{ width: "40px", height: "40px" }}
              />
              <h5 className="mb-0">
                {CurrentProject.name
                  ? CurrentProject.shortName
                    ? `${CurrentProject.name} (${CurrentProject.shortName})`
                    : CurrentProject.name
                  : "N/A"}
              </h5>
            </div>
            {manageProject && (
              <button
                type="button"
                className={`btn btn-sm btn-primary ${
                  !manageProject && "d-none"
                }`}
                data-bs-toggle="modal"
                data-bs-target="#edit-project-modal"
                onClick={handleShow}
              >
                Modify
              </button>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default ProjectBanner;