danak-admin/src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

import { type FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import DefaulModal from "../../../../components/DefaulModal";
import PageLoading from "../../../../components/PageLoading";
import { ErrorType } from "../../../../helpers/types";
import { useDeleteTask, useGetTaskDetail, useUpdateTask } from "../../task/hooks/useTaskData";
import type { TaskDetailType } from "../../task/types/TaskTypes";
import type { Task } from "../../types";
import AttachmentList from "./attachment/List";
import CheckLists from "./checklist/List";
import TaskDetailDescription from "./TaskDetailDescription";
import TaskDetailHeader from "./TaskDetailHeader";
import TaskDetailToolbar from "./TaskDetailToolbar";
import type { TaskDetailTab } from "./types";

type Props = {
  open: boolean;
  task: Task | null;
  statusLabel: string;
  onClose: () => void;
};

const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
  const { t } = useTranslation("global");
  const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const initialTitleRef = useRef("");
  const initialDescriptionRef = useRef("");

  const getTaskDetail = useGetTaskDetail(task?.id ?? "", open && !!task?.id);
  const updateTask = useUpdateTask();
  const deleteTask = useDeleteTask();

  const rawTaskDetail = getTaskDetail.data?.data?.task ?? getTaskDetail.data?.data;
  const taskDetail: TaskDetailType | undefined = rawTaskDetail
    ? {
        ...rawTaskDetail,
        id: rawTaskDetail.id ?? task?.id ?? "",
        labels: rawTaskDetail.labels ?? rawTaskDetail.remarks,
      }
    : undefined;

  useEffect(() => {
    if (!open) {
      setActiveTab(null);
      setTitle("");
      setDescription("");
      initialTitleRef.current = "";
      initialDescriptionRef.current = "";
    }
  }, [open]);

  useEffect(() => {
    if (!taskDetail) return;

    setTitle(taskDetail.title);
    setDescription(taskDetail.description ?? "");
    initialTitleRef.current = taskDetail.title;
    initialDescriptionRef.current = taskDetail.description ?? "";
  }, [taskDetail]);

  const handleTabChange = (tab: TaskDetailTab) => {
    setActiveTab((prev) => (prev === tab ? null : tab));
  };

  const handleDelete = () => {
    if (!task?.id) return;

    deleteTask.mutate(
      { id: task.id, projectId: taskDetail?.projectId ?? "" },
      {
        onSuccess: () => {
          toast.success(t("taskmanager.task_deleted"));
          onClose();
        },
        onError: (error: ErrorType) => {
          toast.error(error.response?.data?.error.message[0]);
        },
      },
    );
  };

  const saveField = (field: "title" | "description", value: string) => {
    if (!task?.id) return;

    const initialValue = field === "title" ? initialTitleRef.current : initialDescriptionRef.current;
    if (value === initialValue) return;

    updateTask.mutate(
      { id: task.id, params: { [field]: value } },
      {
        onSuccess: () => {
          if (field === "title") {
            initialTitleRef.current = value;
          } else {
            initialDescriptionRef.current = value;
          }
          toast.success(t("success"));
        },
        onError: (error: ErrorType) => {
          toast.error(error.response?.data?.error.message[0]);
          if (field === "title") {
            setTitle(initialTitleRef.current);
          } else {
            setDescription(initialDescriptionRef.current);
          }
        },
      },
    );
  };

  if (!task) return null;

  return (
    <DefaulModal open={open} close={onClose} width={680}>
      {getTaskDetail.isPending ? (
        <PageLoading />
      ) : (
        <>
          <TaskDetailHeader
            statusLabel={statusLabel}
            onClose={onClose}
            onDelete={handleDelete}
            isDeleting={deleteTask.isPending}
          />

          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            onBlur={() => saveField("title", title)}
            className="mt-6 w-full text-sm font-bold bg-transparent outline-none"
          />

          <div className="mt-4">
            <TaskDetailToolbar
              activeTab={activeTab}
              onTabChange={handleTabChange}
              taskDetail={taskDetail}
              taskId={task.id}
            />
          </div>

          <TaskDetailDescription
            value={description}
            onChange={setDescription}
            onBlur={() => saveField("description", description)}
          />

          <AttachmentList attachments={taskDetail?.attachments} />

          <CheckLists
            checkListItems={taskDetail?.checkListItems}
            checkListItemCount={taskDetail?.checkListItemCount}
            completedCheckListItemCount={taskDetail?.completedCheckListItemCount}
          />
        </>
      )}
    </DefaulModal>
  );
};

export default TaskDetailModal;