Untitled

// file path: src\Pages\Project\Kanban\KanbanComponents\KanbanTask.tsx

import React, { useEffect, useState } from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import TaskDetailsModal from "../../../../Modals/TaskDetailsModal/TaskDetailsModal";
import { useNavigate, useParams } from "react-router-dom";
import { appSubDir } from "../../../../config";
import { useProjectContext } from "../../Context/ProjectContext";
import Task, { TaskColumn, TaskKey } from "../../../../Types/project-task.type";
import SingleUserAvatar from "../../../../Components/SingleUserAvatar";
import { getIndex } from "../../../../Utils/taskActions";
import { Option } from "antd/es/mentions";
import { Input, Select } from "antd";
// import { updateProjectTask } from "../../../../services/project-task.service";
import { useSelector } from "react-redux";
import { getRoleName } from "../../../../services/auth.service";

interface KanbanTaskProps {
  id: string;
  task: Task;
  currentStatus?: string | null;
  sectionId?: string;
}

function KanbanTask({ id, task, currentStatus }: KanbanTaskProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: id.toString(), data: { type: "task" } });

  const { tasks, project, update } = useProjectContext();
  const { taskId } = useParams<{ taskId: string }>();
  const navigate = useNavigate();

  const user = useSelector((state: any) => state.auth.user);
  const role = getRoleName(user);

  const [isEditingTask, setIsEditingTask] = useState(false);
  const [tempTask, setTempTask] = useState(task.task);
  const [visible, setVisible] = useState(false);
  const [taskIndex, setTaskIndex] = useState<number | null>(null);

  useEffect(() => {
    if (taskId && Array.isArray(tasks)) {
      const parsedTaskId = parseInt(taskId || "");
      const index = getIndex(tasks, parsedTaskId);

      if (index !== -1) {
        setTaskIndex(index);
        setVisible(true);
      } else {
        setTaskIndex(null);
        setVisible(false);
      }
    } 
    else {
      setTaskIndex(null);
      setVisible(false);
    }
    setVisible(parseInt(taskId || "") === task.task_id);
  }, [tasks, taskId, task]);

// useEffect(() => {
//   setVisible(parseInt(taskId || "") === task.task_id);
//   }, [taskId, task]);

  const style: React.CSSProperties = {
    transform: CSS.Transform.toString(transform),
    transition,

    backgroundColor: isDragging ? "#e0e0e0" : "white",
    borderRadius: "6px",
    opacity: isDragging ? 0.8 : 1,
    position: "relative",
    display: "flex",
    justifyContent: "space-between",
    padding: "8px",
    flexDirection: "column",
    cursor: "default",
  };

  const handleOpenModal = (e: React.MouseEvent) => {
    navigate(
      `${appSubDir}projects/${project?.id}/kanban/tasks/${task.task_id}`
    );
    e.stopPropagation();
    // setVisible(true);
  };

  const handleDragPrevent = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const status = currentStatus || task.status;

  const statusClassName = status
    ? `kb-task-status kb-task-status-${status
        .toLowerCase()
        .replace(/\s+/g, "-")}`
    : "kb-task-status kb-task-status-default";

  const handleTaskEdit = async () => {
    update.task(task, "task" as any, tempTask);
    setIsEditingTask(false);
    // if (tempTask.trim() && tempTask !== task.task) {
    //   update.task(task, "task" as any, tempTask);
    // }
  };

  if (!project) {
    return null;
  }

  const handleAssigneeChange = async (newAssigneeId: string) => {
    const newAssigneeIdNumber = parseInt(newAssigneeId, 10); // Convert to number
    update.task(
      task,
      "assignee_id" as TaskKey | TaskColumn,
      newAssigneeIdNumber || null
    );
  };



  if (!project) {
    return null;
  }

  return (
    <>
      <div
        ref={setNodeRef}
        style={style}
        {...attributes}
        {...listeners}
        className="kb-task"
      >
        {/* Status Color Div */}
        <div className={statusClassName}>
          <div className="kb-task-status-rectangle"></div>
        </div>

        <div className="kb-task-topbar">
          {isEditingTask ? (
            <Input
              id="input"
              className="kb-task-name-input"
              value={tempTask}
              onChange={(e) => {
                setTempTask(e.target.value);
              }}
              onBlur={handleTaskEdit}
              onPressEnter={(e) => {
                handleTaskEdit();
              }}
              onKeyDown={(e) => {
                e.stopPropagation();
              }}
              autoFocus
            />
          ) : (
            <div>
              <span>
                {task.task}
                <button
                  className="kb-open-task-pencil-button"
                  onPointerDown={handleDragPrevent}
                  onClick={(e) => {
                    e.stopPropagation();
                    setIsEditingTask(true);
                  }}
                >
                  <i title="Edit Task" className="fi fi-rr-pencil"></i>
                </button>
              </span>
            </div>
          )}
          <button
            onClick={handleOpenModal}
            onPointerDown={handleDragPrevent}
            className="kb-open-task-modal-button"
          >
            <i className="fi fi-rr-arrow-up-right-from-square"></i>
          </button>
        </div>

        <div className="kb-bottom-bar">
          <div className="kb-bottom-bar-left">
            <span className="kb-subtask-box">
              <i className="fi fi-rr-diagram-subtask"></i>{" "}
              {task.sub_tasks?.length || 0}
            </span>
          </div>
          <div>
            {/* {task?.assignee_id && (
              <div
                onPointerDown={(e) => e.stopPropagation()} // Prevent dnd-kit interference
                onClick={(e) => e.stopPropagation()}
              >
                {task.description && "●"}
                <Select
                  style={{ marginLeft: "10px" }}
                  onClick={(e) => e.stopPropagation()}
                  value={String(task.assignee_id)}
                  onChange={handleAssigneeChange}
                >
                  {project?.members.map((member) => (
                    <Option
                      key={String(member.user_id)}
                      value={String(member.user_id)}
                    >
                      <SingleUserAvatar user={member.user} />
                    </Option>
                  ))}
                </Select>
              </div>
            )} */}
            <div
              onPointerDown={(e) => e.stopPropagation()} // Prevent dnd-kit interference
              onClick={(e) => e.stopPropagation()}
            >
              {task.description && "●"}
              <Select
                style={{ marginLeft: "10px" }}
                onClick={(e) => e.stopPropagation()}
                value={String(task.assignee_id)}
                onChange={handleAssigneeChange}
              >
                {project?.members.map((member) => (
                  <Option
                    key={String(member.user_id)}
                    value={String(member.user_id)}
                  >
                    <SingleUserAvatar user={member.user} />
                  </Option>
                ))}
              </Select>
            </div>
          </div>
        </div>
      </div>
      {visible && taskIndex !== null && (
        <TaskDetailsModal
          visible={visible}
          taskIndex={getIndex(tasks, task.task_id)}
          setVisible={setVisible}
        />
      )}
    </>
  );
}

export default KanbanTask;