coms3011a-lab1/components/AddTaskForm.tsx

"use client";

import { useState } from "react";
import type { TaskInput } from "@/types/task";

export default function AddTaskForm({
  onSubmit,
  onClose,
}: {
  onSubmit: (task: TaskInput) => Promise<void> | void;
  onClose: () => void;
}) {
  const [formData, setFormData] = useState<TaskInput>({
    title: "",
    description: "",
    dueDate: "",
    topic: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.topic) {
      alert("Please select a topic before saving.");
      return;
    }
    await onSubmit(formData);
    onClose();
  };

  return (
    <div style={styles.overlay}>
      <div style={styles.modal}>
        <h2 style={styles.title}>Add New Task</h2>
        <form onSubmit={handleSubmit} style={styles.form}>
          <input
            name="title"
            placeholder="Title"
            value={formData.title}
            onChange={handleChange}
            required
            style={styles.input}
          />
          <textarea
            name="description"
            placeholder="Description"
            value={formData.description}
            onChange={handleChange}
            style={styles.textarea}
          />
          <input
            name="dueDate"
            type="date"
            value={formData.dueDate}
            onChange={handleChange}
            required
            style={styles.input}
          />

          <select
            name="topic"
            value={formData.topic}
            onChange={handleChange}
            required
            style={styles.input}
          >
            <option value="">Select a topic...</option>
            <option value="Academic">Academic</option>
            <option value="Work">Work</option>
            <option value="Personal">Personal</option>
            <option value="Creative">Creative</option>
            <option value="Household">Household</option>
            <option value="Other">Other</option>
          </select>

          <div style={styles.actions}>
            <button type="submit" style={styles.saveButton}>
              Save
            </button>
            <button type="button" onClick={onClose} style={styles.cancelButton}>
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

const styles = {
  overlay: {
    position: "fixed" as const,
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    background: "rgba(0,0,0,0.4)",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  modal: {
    background: "#f8fafc",
    padding: "25px",
    borderRadius: "12px",
    boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
    width: "350px",
  },
  title: {
    marginBottom: "15px",
    fontSize: "22px",
    fontWeight: "700",
    color: "var(--text-dark)",
    textAlign: "center" as const,
  },
  form: {
    display: "flex",
    flexDirection: "column" as const,
    gap: "12px",
  },
  input: {
    padding: "10px",
    borderRadius: "8px",
    border: "1px solid #cbd5e1",
    fontSize: "14px",
    color: "var(--text-dark)",
    fontFamily: "inherit",
  },
  textarea: {
    padding: "10px",
    borderRadius: "8px",
    border: "1px solid #cbd5e1",
    fontSize: "14px",
    color: "var(--text-dark)",
    fontFamily: "inherit",
    minHeight: "60px",
  },
  actions: {
    display: "flex",
    justifyContent: "space-between",
    marginTop: "15px",
  },
  saveButton: {
    background: "#0ea5e9",
    color: "white",
    border: "none",
    padding: "8px 16px",
    borderRadius: "8px",
    cursor: "pointer",
    fontWeight: "600",
  },
  cancelButton: {
    background: "#e2e8f0",
    color: "#0f172a",
    border: "none",
    padding: "8px 16px",
    borderRadius: "8px",
    cursor: "pointer",
    fontWeight: "600",
  },
};