import React, { useState } from "react";
import { useParams } from "react-router-dom";
import { useServiceProject } from "../../hooks/useServiceProject";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import ManageServiceProject from "./ManageServiceProject";
import GlobalModel from "../common/GlobalModel";
import { SpinnerLoader } from "../common/Loader";
import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
import ServiceProfile from "./ServiceProfile";
import ServiceJobs from "../Dashboard/ServiceJobs";

const ServiceProjectProfile = () => {
  const { projectId } = useParams();
  const [IsOpenModal, setIsOpenModal] = useState(false);
  const { data, isLoading, isError, error } = useServiceProject(projectId);
  if (isLoading)
    return (
      <div className="py-8">
        <SpinnerLoader />
      </div>
    );
  return (
    <>
      {IsOpenModal && (
        <GlobalModel
          isOpen={IsOpenModal}
          closeModal={() => setIsOpenModal(false)}
        >
          <ManageServiceProject
            serviceProjectId={projectId}
            onClose={() => setIsOpenModal(false)}
          />
        </GlobalModel>
      )}

      <div className="row py-2">
        <div className="col-md-6 col-lg-5 order-2 mb-6">
          <ServiceProfile data={data} setIsOpenModal={setIsOpenModal} />
        </div>

        <div className="col-md-6 col-lg-7 order-2 mb-6">
          <ServiceBranch />
        </div>
        <div className="col-md-6 col-lg-5 order-2 mb-6">
          <ServiceJobs/>
        </div>
      </div>
    </>
  );
};

export default ServiceProjectProfile;