import React, { useState } from "react";
import { getNextBadgeColor } from "../../utils/appUtils";
import { useServiceProjectJobs } from "../../hooks/useServiceProject";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { SpinnerLoader } from "../common/Loader";
import { useParams } from "react-router-dom";
import ProjectPage from "../../pages/project/ProjectPage";
import { useServiceProjectJobContext } from "./Jobs";


const JobList = ({ filterByProject }) => {
  const {setSelectedJob} = useServiceProjectJobContext()
  const { id } = useParams();
  const { data, isLoading, isError, error } = useServiceProjectJobs(
    ITEMS_PER_PAGE,
    1,
    true,
    filterByProject ?? id
  );

  const jobGrid = [
    {
      key: "title",
      label: "Title",
      getValue: (e) => (
        <span
          className="fw-semibold text-truncate d-inline-block"
          style={{
            maxWidth: "100%",
            width: "210px",
          }}
        >
          {e?.title}
        </span>
      ),
      isAlwaysVisible: true,
      className: "text-start",
    },
    {
      key: "project",
      label: "Project",
      getValue: (e) => <div className="text-start ">{e?.project?.name}</div>,
      isAlwaysVisible: true,
      className: "text-start d-none d-sm-table-cell",
    },

    {
      key: "employee",
      label: "Team",
      getValue: (e) => <EmployeeAvatarGroup employees={e.assignees} />,
      isAlwaysVisible: true,
      className: "text-start d-none d-sm-table-cell",
    },

    {
      key: "startDate",
      label: "Start Date",
      getValue: (e) => formatUTCToLocalTime(e.startDate),
      isAlwaysVisible: true,
      className: "text-center d-none d-sm-table-cell ",
    },
    {
      key: "dueDate",
      label: "Due To",
      getValue: (e) => formatUTCToLocalTime(e.startDate),
      isAlwaysVisible: true,
      className: "text-center  d-none d-sm-table-cell",
    },
  ];

  return (
    <div className="dataTables_wrapper dt-bootstrap5 no-footer ">
      <table
        className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
        aria-describedby="DataTables_Table_0_info"
      >
        <thead>
          <tr>
            {jobGrid.map((col) => (
              <th
                key={col.key}
                className={`${col.className} text-center`}
                scope="col"
              >
                <div className={col.className}>{col.label}</div>
              </th>
            ))}
            <th className="sorting_disabled text-center" aria-label="Actions">
              Actions
            </th>
          </tr>
        </thead>

        <tbody>
          {Array.isArray(data?.data) && data.data.length > 0 ? (
            data.data.map((row, i) => (
              <tr key={i}>
                {jobGrid.map((col) => (
                  <td key={col.key} className={col.className}>
                    {col.getValue(row)}
                  </td>
                ))}
                <td>
                  <div className="dropdown">
                    <button
                      className="btn btn-icon dropdown-toggle hide-arrow"
                      data-bs-toggle="dropdown"
                    >
                      <i className="bx bx-dots-vertical-rounded bx-md"></i>
                    </button>
                    <div className="dropdown-menu dropdown-menu-end">
                      {/* View always visible */}
                      <button className="dropdown-item py-1" onClick={()=>setSelectedJob({showCanvas:true,job:row?.id})}>
                        <i className="bx bx-detail bx-sm"></i> View
                      </button>

                      <>
                        <button className="dropdown-item py-1">
                          <i className="bx bx-edit bx-sm"></i> Edit
                        </button>
                      </>
                    </div>
                  </div>
                </td>
              </tr>
            ))
          ) : (
            <tr style={{ height: "200px" }}>
              <td
                colSpan={jobGrid.length + 1}
                className="text-center border-0 align-middle"
              >
                {isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default JobList;