import React, { useState,useEffect } from "react";
import { useModal } from "../../../ModalContext";
import AssignRoleModel from "../AssignRole";
import { useParams } from "react-router-dom";
import GlobalModel from "../../common/GlobalModel";

const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
  const { projectId } = useParams();
  const [ itemName, setItemName ] = useState( "" );
  const [NewWorkItem,setNewWorkItem] = useState()
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);
  const getProgress = (planned, completed) => {
    return (completed * 100) / planned + "%";
  };

  const handleAssignTask = () => {

    setItemName("");
  };

  // const showCreateItemModal = (modalData) => {
  //   openModal(
  //     <AssignRoleModel assignData={modalData} onClose={closedModal} />,
  //     handleAssignTask ,"lg"
  //   );
  // };

  useEffect(() => {

    setNewWorkItem(workItem)
  }, [workItem]); // This hook will run whenever the workItem prop changes

  let assigndata = {
    building: forBuilding,
    floor: forFloor,
    workArea: forWorkArea,
    workItem,
  };

  const hasWorkItem = NewWorkItem && NewWorkItem

  return (
    <>
      <GlobalModel
        isOpen={isModalOpen}
        closeModal={closeModal}
        dialogClass="modal-dialog-centered"
        role="document"
        size="lg"
      >
        <AssignRoleModel assignData={assigndata} onClose={closeModal} />
      </GlobalModel>
      <tr>
        <td className="text-start table-cell-small">
          <i className="bx bx-right-arrow-alt"></i>
          <span className="fw-medium">
            {hasWorkItem ? ( NewWorkItem?.workItem?.activityMaster?.activityName || workItem.activityMaster?.activityName ) :"NA"
             }
          </span>
        </td>
        {/* for mobile view */}
        <td className="text-center d-sm-none d-sm-table-cell">
          {hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) :"NA" }/{" "}
          { hasWorkItem ? (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : "NA"}
        </td>
         {/* for greather than mobile view ************* */}
        <td className="text-center d-none d-md-table-cell">
          {hasWorkItem ?  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork): "NA"}
        </td>
        <td className="text-center d-none d-md-table-cell">
          {hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) : "NA"}
        </td>
        {/* ************************************************ */}
        <td className="text-center" style={{ width: "15%" }}>
          <div className="progress p-0">
            <div
              className="progress-bar"
              role="progressbar"
              style={{
                width: getProgress(
                  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork),
                (NewWorkItem?.workItem?.completedWork || workItem?.completedWork)
                ),
                height: "10px",
              }}
              aria-valuenow={
                hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork)  : 0
              }
              aria-valuemin="0"
              aria-valuemax={
                hasWorkItem ?  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : 0
              }
            ></div>
          </div>
        </td>
        {/* for greather than mobile view */}
        <td className="d-none d-md-table-cell">
          <div className="dropdown">
            {!projectId && (
              <button
                aria-label="Modify"
                type="button"
                className="btn p-0"
                data-bs-toggle="modal"
                data-bs-target="#project-modal"
                onClick={openModal}
              >
                <span className="badge bg-label-primary me-1">Assign</span>
              </button>
            )}
            <button
              aria-label="Modify"
              type="button"
              className="btn p-0 dropdown-toggle hide-arrow"
            >
              <i className="bx bxs-edit me-2 text-primary"></i>
            </button>
            <button
              aria-label="Delete"
              type="button"
              className="btn p-0 dropdown-toggle hide-arrow"
            >
              <i className="bx bx-trash me-1 text-danger"></i>
            </button>
          </div>
        </td>
        {/* for mobile view */}
        <td className="text-end d-sm-none d-sm-table-cell">
          <div className="d-flex align-items-center justify-content-center ">
            <a
              className={`btn btn-icon dropdown-toggle hide-arrow`}
              data-bs-toggle="dropdown"
            >
              <i className="bx bx-dots-vertical-rounded bx-md"></i>
            </a>

            <div className="dropdown-menu dropdown-menu-end m-0">
              {" "}
              <a className="dropdown-item">
                {" "}
                <i className="bx bxs-edit me-2 text-primary"></i>Edit
              </a>
              <a className="dropdown-item">
                {" "}
                <i className="bx bx-trash me-1 text-danger"></i>Delete
              </a>
            </div>
          </div>
        </td>
      </tr>
    </>
  );
};

export default WorkItem;
