import React, { useEffect, useState } from "react";
import WorkItem from "./WorkItem";
import { useProjectDetails } from "../../../hooks/useProjects";
import { getCachedData } from "../../../slices/apiDataManager";

const WorkArea = ({ workArea, floor, forBuilding }) => {
  const [workItems, setWorkItems] = useState([]);

  useEffect(() => {
    const project = getCachedData("projectInfo");
    if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;

    const building = project.buildings?.find((b) => b.id === forBuilding.id);
    const floors = building?.floors?.find((f) => f.id === floor.id);
    const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);

    setWorkItems(workAreas?.workItems || []);
  }, [workArea, floor, floor]);

  return (
    <React.Fragment key={workArea.id}>
      <tr>
        <td colSpan="4" className="text-start table-cell">
          <div className="row ps-2">
            <div className="col-6">
              <div className="row">
                <div className="col">
                  {" "}
                  <span className="fw-semibold text-primary">
                    Floor:&nbsp;
                  </span>{" "}
                  <span class="fw-normal text-darkgreen">
                    {floor.floorName}
                  </span>
                </div>
                <div className="col">
                  <span className="ms-10 fw-semibold text-primary">
                    Work Area:&nbsp;
                  </span>{" "}
                  <span class=" fw-normal text-darkgreen">
                    {workArea.areaName}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      {workItems && workItems.length > 0 && (
        <tr className="overflow-auto">
          <td colSpan={4}>
            <table className="table mx-1">
              <thead>
                <tr>
                  <th className="infra-activity-table-header-first">
                    Activity
                  </th>
                  {/* for mobile view */}
                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
                    Status
                  </th>
                  {/* for greather than mobile view ************* */}
                  <th className="infra-activity-table-header d-none d-md-table-cell">
                    Planned
                  </th>
                  <th className="infra-activity-table-header d-none d-md-table-cell">
                    Completed
                  </th>
                  {/* ************************** */}
                  <th className="infra-activity-table-header">Progress</th>
                  <th className="infra-activity-table-header">Actions</th>
                </tr>
              </thead>
              <tbody className="table-border-bottom-0">
                {workArea?.workItems && workArea.workItems.length > 0 ? (
                  workArea.workItems.map((workItem) => (
                    <WorkItem
                      key={workItem.workItemId}
                      workItem={workItem}
                      forBuilding={forBuilding}
                      forFloor={floor}
                      forWorkArea={workArea}
                    />
                  ))
                ) : (
                  <tr>
                    <td colSpan="4" className="text-center">
                      No Data
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </td>
        </tr>
      )}
      {!workItems && <p>No item</p>}
    </React.Fragment>
  );
};
export default WorkArea;
