import React, { useEffect, useState, useRef } from "react";
import moment from "moment";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { TasksRepository } from "../../repositories/TaskRepository";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import { getBgClassFromHash } from "../../utils/projectStatus";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ImagePreview from "../common/ImagePreview";

const schema = z.object({
  comment: z.string().min(1, "Comment cannot be empty"),
});

/**
 * ReportTaskComments component for displaying and adding comments to a task.
 * It also shows a summary of the activity and task details.
 *
 * @param {object} props - The component props.
 * @param {object} props.commentsData - Data related to the task and its comments, including the description.
 * @param {function} props.closeModal - Callback function to close the modal.
 */

const ReportTaskComments = ({ commentsData, closeModal }) => {
  const [loading, setloading] = useState(false);
  const [comments, setComment] = useState([]);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset, // Destructure reset from useForm
  } = useForm({
    resolver: zodResolver(schema),
  });

  const containerRef = useRef(null);
  const firstRender = useRef(true);

  useEffect(() => {
    const taskList = getCachedData("taskList");
    if (taskList && taskList.data && commentsData?.id) {
      const currentTask = taskList.data.find(
        (task) => task.id === commentsData.id
      );
      if (currentTask && currentTask.comments) {
        setComment(currentTask.comments);
      } else {
        setComment(commentsData?.comments || []);
      }
    } else {
      setComment(commentsData?.comments || []);
    }
    firstRender.current = true;
  }, [commentsData]);

  useEffect(() => {
    if (!firstRender.current && containerRef.current) {
      containerRef.current.scrollTop = containerRef.current.scrollHeight;
    } else {
      firstRender.current = false;
    }
  }, [comments]);

  const onSubmit = async (data) => {
    let sendComment = {
      ...data,
      taskAllocationId: commentsData?.id,
      commentDate: new Date().toISOString(),
    };
    try {
      setloading(true);
      const resp = await TasksRepository.taskComments(sendComment);

      setComment((prevItems) => [...prevItems, resp.data]);

      const taskList = getCachedData("taskList");

      if (taskList && taskList.data) {
        const updatedTaskList = taskList.data.map((task) => {
          if (task.id === resp.data.taskAllocationId) {
            const existingComments = Array.isArray(task.comments)
              ? task.comments
              : [];
            return {
              ...task,
              comments: [...existingComments, resp.data],
            };
          }
          return task;
        });

        cacheData("taskList", {
          data: updatedTaskList,
          projectId: taskList.projectId,
        });
      }

      reset();
      setloading(false);
      showToast("Successfully Sent", "success");
    } catch (error) {
      setloading(false);
      showToast(
        error.response.data?.message || "Something went wrong",
        "error"
      );
    }
  };
  return (
    <div className="p-1">
      <div className="modal-body p-sm-4 p-0">
        <h5 className=" text-center mb-2">Activity Summary</h5>

        <p className="small-text text-start my-2">
          {commentsData?.workItem?.workArea?.floor?.building?.description}
        </p>

        <p className="fw-bold my-2 text-start">
          Assigned By :
          <span className=" ms-2">
            {commentsData?.assignedBy?.firstName +
              " " +
              commentsData?.assignedBy?.lastName}
          </span>{" "}
        </p>

        <p className="fw-bold my-2 text-start">
          Reported By :
          <span className=" ms-2">
            {" "}
            -
            {/* {commentsData?.assignedBy?.firstName +
                " " +
                commentsData?.assignedBy?.lastName} */}
          </span>{" "}
        </p>

        <p className="fw-bold my-2 text-start">
          Location :
          <span className="fw-normal ms-2 text-start">
            {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
            <i className="bx bx-chevron-right"></i>{" "}
            {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
            <i className="bx bx-chevron-right"></i>
            {`${commentsData?.workItem?.workArea?.areaName}`}
            <i className="bx bx-chevron-right"></i>
            {` ${commentsData?.workItem?.activityMaster?.activityName}`}
          </span>
        </p>
        <p className="fw-bold my-2 text-start">
          Planned Work: {commentsData?.plannedTask}{" "}
          {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
        </p>
        <p className="fw-bold my-2 text-start">
          {" "}
          Completed Work : {commentsData?.completedTask}{" "}
          {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
        </p>
        <div className="d-flex align-items-center flex-wrap">
          <p className="fw-bold text-start m-0 me-1">Team :</p>
          <div className="d-flex flex-wrap align-items-center gap-2">
            {commentsData?.teamMembers?.map((member, idx) => (
              <span key={idx} className="d-flex align-items-center">
                <Avatar
                  firstName={member?.firstName}
                  lastName={member?.lastName}
                  size="xs"
                />
                {member?.firstName + " " + member?.lastName}
              </span>
            ))}
          </div>
        </div>
           {commentsData?.reportedPreSignedUrls?.length > 0 && (
          <div className=" text-start">
            <p className="fw-bold m-0">Attachment</p>
            <ImagePreview
              IsReported={true}
              images={commentsData?.reportedPreSignedUrls}
            />
          </div>
        )}
        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
          <label className="fw-bold text-start my-1">Add comment :</label>
          <textarea
            {...register("comment")}
            className="form-control"
            id="exampleFormControlTextarea1"
            placeholder="Enter comment"
          />
          {errors.comment && (
            <div className="danger-text">{errors.comment.message}</div>
          )}
          <div className="text-end my-1">
            <button
              type="button"
              className="btn btn-sm btn-secondary"
              onClick={closeModal}
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button
              type="submit"
              className="btn btn-sm btn-primary ms-2"
              disabled={loading}
            >
              {loading ? "Sending..." : "Comment"}
            </button>
          </div>
        </form>
     
        <ul
          className="list-group px-0 mx-0 overflow-auto border-0"
          ref={containerRef}
        >
          {comments &&
            comments
              ?.slice()
              .reverse()
              .map((data, idx) => {
                const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
                return (
                  <li
                    className={`list-group-item list-group-item-action border-none my-1 p-1`}
                    key={idx}
                  >
                    <div
                      className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
                    >
                      <div className="avatar avatar-xs me-1">
                        <span
                          className={`avatar-initial rounded-circle bg-label-primary`}
                        >
                          {`${data?.employee?.firstName?.slice(
                            0,
                            1
                          )} ${data?.employee?.lastName?.slice(0, 1)}`}
                        </span>
                      </div>

                      <div
                        className={`d-flex align-items-center justify-content-start`}
                      >
                        <p className={`mb-0 text-muted me-2`}>{fullName}</p>
                        <p
                          className={`text-secondary m-0`}
                          style={{ fontSize: "10px" }}
                        >
                          {moment.utc(data?.commentDate).local().fromNow()}
                        </p>
                      </div>
                    </div>
                    <p className={`ms-6 text-start mb-0 text-body`}>
                      {data?.comment}
                    </p>
                    {data?.preSignedUrls?.length > 0 && (
                      <div className="ps-6 text-start">
                        <small className="">Attachment</small>
                        <ImagePreview images={data?.preSignedUrls} IsReported={true} />
                      </div>
                    )}
                  </li>
                );
              })}
        </ul>
      </div>
    </div>
  );
};

export default ReportTaskComments;