import { type FC, useEffect, useState } from "react";
import DefaulModal from "../../../../components/DefaulModal";
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 [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
  const [description, setDescription] = useState("");

  useEffect(() => {
    if (!open) {
      setActiveTab(null);
      setDescription("");
    }
  }, [open]);

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

  if (!task) return null;

  return (
    <DefaulModal open={open} close={onClose} width={680}>
      <TaskDetailHeader statusLabel={statusLabel} onClose={onClose} />

      <h2 className="mt-6 text-sm font-bold">{task.title}</h2>

      <div className="mt-4">
        <TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} />
      </div>

      <TaskDetailDescription value={description} onChange={setDescription} />

      <AttachmentList />

      <CheckLists />
    </DefaulModal>
  );
};

export default TaskDetailModal;