import React, { useEffect, useState } from "react";
import moment from "moment";
import { getProjectStatusName } from "../../utils/projectStatus";
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
import {useParams} from "react-router-dom";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT} from "../../utils/constants";
import GlobalModel from "../common/GlobalModel";
import ManageProjectInfo from "./ManageProjectInfo";
import {useQueryClient} from "@tanstack/react-query";
const AboutProject = () =>
{
  const [ IsOpenModal, setIsOpenModal ] = useState( false )
  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
    onSuccessCallback: () =>
    {
      setIsOpenModal(false)
    }
  } )
  const ClientQuery = useQueryClient()
  const {projectId} = useParams();
  const manageProject = useHasUserPermission(MANAGE_PROJECT);
  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
  const handleFormSubmit = ( updatedProject ) =>
  {
    if ( projects_Details?.id )
    {
     ClientQuery.invalidateQueries({queryKey:["projectInfo"]})
    UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
    } );
      
  }
};
  return (
    <>
      {IsOpenModal && (
         <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
          <ManageProjectInfo
            project={projects_Details}
            handleSubmitForm={handleFormSubmit}
            onClose={() => setIsOpenModal( false )}
            isPending={isPending}
          />
      </GlobalModel>
     )}
      {projects_Details && (
       <>
        <div className="card mb-6">
          <div className="card-header text-start">
            <h6 className="card-action-title mb-0">
              {" "}
              <i className="fa fa-building rounded-circle text-primary"></i>
              <span className="ms-2">Project Profile</span>
            </h6>
          </div>
          <div className="card-body">
            <ul className="list-unstyled my-3 ps-2">
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-cog"></i>
                <span className="fw-medium mx-2">Name:</span>{" "}
                <span>{projects_Details.name}</span>
              </li>
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-fingerprint"></i>
                <span className="fw-medium mx-2">Nick Name:</span>{" "}
                <span> {projects_Details.shortName} </span>
              </li>
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-check"></i>
                <span className="fw-medium mx-2">Start Date:</span>{" "}
                <span>
                  {projects_Details.startDate
                    ? moment(projects_Details.startDate).format("DD-MMM-YYYY")
                    : "N/A"}
                </span>
              </li>
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-stop-circle"></i>{" "}
                <span className="fw-medium mx-2">End Date:</span>{" "}
                <span>
                  {projects_Details.endDate
                    ? moment(projects_Details.endDate).format("DD-MMM-YYYY")
                    : "N/A"}
                </span>
              </li>
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-trophy"></i>
                <span className="fw-medium mx-2">Status:</span>{" "}
                <span>{getProjectStatusName(projects_Details.projectStatusId)}</span>
              </li>
              <li className="d-flex align-items-center mb-3">
                <i className="bx bx-user"></i>
                <span className="fw-medium mx-2">Contact:</span>{" "}
                <span>{projects_Details.contactPerson}</span>
              </li>
              <li className="d-flex flex-column align-items-start mb-3">
                <div className="d-flex align-items-center">
                  <i className="bx bx-flag"></i>
                  <span className="fw-medium mx-2">Address:</span>
                  {projects_Details.projectAddress?.length <= 20 && (
                    <span>{projects_Details.projectAddress}</span>
                  )}
                </div>
                {projects_Details.projectAddress?.length > 20 && (
                  <div className="ms-4 text-start">{projects_Details.projectAddress}</div>
                )}
              </li>

              <li className="d-flex justify-content-center mb-3">
                {manageProject && (
                  <button
                    type="button"
                    className={`btn btn-sm btn-primary ${
                      !manageProject && "d-none"
                    }`}
                    data-bs-toggle="modal"
                    data-bs-target="#edit-project-modal"
                    onClick={()=>setIsOpenModal(true)}
                  >
                    Modify Details
                  </button>
                )}
              </li>
            </ul>
          </div>
          </div>
          </>
        )}
    

      {isLoading && <span>loading...</span>}
    </>
  );
};

export default AboutProject;