import React, { createContext, useContext, useEffect, useState } from "react";
import JobList from "./JobList";
import { useNavigate } from "react-router-dom";
import { useServiceProjects } from "../../hooks/useServiceProject";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import OffcanvasComponent from "../common/OffcanvasComponent";
import showToast from "../../services/toastService";
import ManageJob from "./ManageJob";
import ManageJobTicket from "./ManageJobTicket";
import GlobalModel from "../common/GlobalModel";
import PreviewDocument from "../Expenses/PreviewDocument";

export const JonContext = createContext();
export const useServiceProjectJobContext = () => {
  const context = useContext(JonContext);
  if (!context) {
    showToast("Something went wrong", "warning");
    window.location = "/dashboard";
  }
  return context;
};
const Jobs = () => {
  const [manageJob, setManageJob] = useState({ isOpen: false, jobId: null });
  const [showCanvas, setShowCanvas] = useState(false);
  const [selectedProject, setSelectedProject] = useState(null);
  const [selectJob, setSelectedJob] = useState({
    showCanvas: false,
    job: null,
  });
  const navigate = useNavigate();
  const { data } = useServiceProjects(ITEMS_PER_PAGE, 1);

  const contextProvider = {
    setSelectedJob,
    setSelectedProject,
    setManageJob,
  };
  return (
    <>
      <JonContext.Provider value={contextProvider}>
        <OffcanvasComponent
          id="customCanvas"
          title="Job"
          placement="end"
          show={selectJob.showCanvas}
          onClose={() => setSelectedJob({ showCanvas: false, job: null })}
        >
          <ManageJobTicket Job={selectJob} />
        </OffcanvasComponent>
        <OffcanvasComponent
          id="customCanvas1"
          title={`${manageJob.jobId ? "Update a Job" : "Create a new Job"} `}
          placement="end"
          show={manageJob.isOpen}
          onClose={() => setManageJob({ isOpen: false, jobId: null })}
        >
          <ManageJob Job={manageJob.jobId} />
        </OffcanvasComponent>
        <div className="card page-min-h my-2 px-4">
          <div className="row">
            <div className="col-12 py-2 d-flex justify-content-end ">
              <div className="px-2">
                <button
                  className="btn btn-sm btn-primary"
                  onClick={() => setManageJob({ isOpen: true, jobId: null })}
                >
                  <i className="bx bx-plus-circle bx-md me-2"></i>New Job
                </button>
              </div>
            </div>

            <JobList filterByProject={selectedProject} />
          </div>
        </div>
      </JonContext.Provider>
    </>
  );
};

export default Jobs;
