task_form.tsx

import { useEffect, useState } from "react";

import { TimeInput } from "@/components/time_input";
import { TopicInput } from "@/components/topic_input";

interface Time {
  id: number;
  day: number;
  start_time: string;
  end_time: string;
  repeating: boolean;
}

interface Topic {
  id: number;
  name: string;
  color_hex: number;
}

type TopicSelection =
  | { type: "existing"; id: number }
  | { type: "new"; name: string; color_hex: number };

interface Item {
  id: number;
  name: string;
  completed: boolean;
  description: string;
  times: Time[];
  topics: Topic[];
}

interface TaskFormProps {
  userId: number;
  onTaskCreated: (task: Item) => void;
}

export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
  const [taskName, setTaskName] = useState("");
  const [description, setDescription] = useState("");
  const [times, setTimes] = useState<Time[]>([]);
  const [topics, setTopics] = useState<TopicSelection[]>([]);
  const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);

  useEffect(() => {
    fetch("http://localhost:8000/api/planner/topic/")
      .then((res) => res.json())
      .then((data) => setAvailableTopics(data))
      .catch((err) => console.error("Failed to load topics:", err));
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const existing_topic_ids = topics
        .filter((t) => t.type === "existing")
        .map((t) => t.id);

      const new_topics = topics
        .filter((t) => t.type === "new")
        .map((t) => ({ name: t.name, color_hex: t.color_hex }));
      const response = await fetch("http://localhost:8000/api/planner/tasks/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: taskName,
          description: description,
          completed: false,
          user_id: userId,
          times: times,
          existing_topic_ids: existing_topic_ids,
          new_topics: new_topics,
        }),
      });

      if (!response.ok) {
        throw new Error("Failed to create task");
      }

      const newTask = await response.json();
      onTaskCreated(newTask);
      setTaskName("");
      setDescription("");
      setTimes([]);
      setTopics([]);
    } catch (error) {
      console.error("Error creating task:", error);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-400 p-4 text-slate-200"
    >
      <input
        className="title-input w-full rounded-lg bg-slate-400 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
        type="text"
        value={taskName}
        onChange={(e) => setTaskName(e.target.value)}
        placeholder="Task name"
        required
      />
      <div className="description-wrapper flex w-full flex-col items-center">
        <h1 className="description-input-title text-xl hover:brightness-110">
          Description
        </h1>
        <textarea
          className="description-input w-full rounded-lg bg-slate-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={7}
          placeholder="Add description here..."
        />
      </div>
      <TopicInput
        availableTopics={availableTopics}
        topics={topics}
        setTopics={setTopics}
      />
      <TimeInput times={times} setTimes={setTimes} />
      <button
        className="w-fit rounded-lg border border-slate-300 bg-slate-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
        type="submit"
      >
        Save
      </button>
    </form>
  );
}