// @bun
// src/components/templates/todos/TaskForm.tsx
import { useState } from "react";
import { useMutation } from "@apollo/client/react";
import { gql } from "@apollo/client";
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
import { jsx, jsxs } from "react/jsx-runtime";
"use client";
var CREATE_TASK = gql`
  mutation CreateTask($input: CreateTaskInput!) {
    createTask(input: $input) {
      id
      title
    }
  }
`;
function TaskForm({ categories }) {
  const { projectId } = useTemplateRuntime();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [priority, setPriority] = useState("MEDIUM");
  const [categoryId, setCategoryId] = useState("none");
  const [tagsInput, setTagsInput] = useState("");
  const [createTask, { loading }] = useMutation(CREATE_TASK);
  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!title.trim())
      return;
    await createTask({
      variables: {
        input: {
          projectId,
          title: title.trim(),
          description: description.trim() || undefined,
          priority,
          categoryId: categoryId === "none" ? undefined : categoryId,
          tags: parseTags(tagsInput)
        }
      },
      refetchQueries: ["Tasks"],
      awaitRefetchQueries: true
    });
    setTitle("");
    setDescription("");
    setPriority("MEDIUM");
    setCategoryId("none");
    setTagsInput("");
  };
  return /* @__PURE__ */ jsxs("form", {
    onSubmit: handleSubmit,
    className: "border-border bg-background/60 space-y-3 rounded-2xl border p-4",
    children: [
      /* @__PURE__ */ jsx("div", {
        children: /* @__PURE__ */ jsxs("label", {
          className: "text-muted-foreground text-xs font-semibold uppercase",
          children: [
            "Title",
            /* @__PURE__ */ jsx("input", {
              type: "text",
              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
              placeholder: "What needs to get done?",
              value: title,
              onChange: (event) => setTitle(event.target.value),
              required: true
            })
          ]
        })
      }),
      /* @__PURE__ */ jsx("div", {
        children: /* @__PURE__ */ jsxs("label", {
          className: "text-muted-foreground text-xs font-semibold uppercase",
          children: [
            "Description",
            /* @__PURE__ */ jsx("textarea", {
              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
              rows: 3,
              placeholder: "Add context or policy notes",
              value: description,
              onChange: (event) => setDescription(event.target.value)
            })
          ]
        })
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "grid gap-3 md:grid-cols-3",
        children: [
          /* @__PURE__ */ jsxs("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Priority",
              /* @__PURE__ */ jsxs("select", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                value: priority,
                onChange: (event) => setPriority(event.target.value),
                children: [
                  /* @__PURE__ */ jsx("option", {
                    value: "LOW",
                    children: "Low"
                  }),
                  /* @__PURE__ */ jsx("option", {
                    value: "MEDIUM",
                    children: "Medium"
                  }),
                  /* @__PURE__ */ jsx("option", {
                    value: "HIGH",
                    children: "High"
                  }),
                  /* @__PURE__ */ jsx("option", {
                    value: "URGENT",
                    children: "Urgent"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Category",
              /* @__PURE__ */ jsxs("select", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                value: categoryId,
                onChange: (event) => setCategoryId(event.target.value),
                children: [
                  /* @__PURE__ */ jsx("option", {
                    value: "none",
                    children: "None"
                  }),
                  categories.map((category) => /* @__PURE__ */ jsx("option", {
                    value: category.id,
                    children: category.name
                  }, category.id))
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("label", {
            className: "text-muted-foreground text-xs font-semibold uppercase",
            children: [
              "Tags",
              /* @__PURE__ */ jsx("input", {
                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
                placeholder: "Comma separated (optional)",
                value: tagsInput,
                onChange: (event) => setTagsInput(event.target.value)
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsx("button", {
        type: "submit",
        className: "btn-primary w-full py-2 text-sm font-semibold",
        disabled: loading,
        children: loading ? "Saving..." : "Add task"
      })
    ]
  });
}
function parseTags(input) {
  return input.split(",").map((tag) => tag.trim()).filter(Boolean);
}
export {
  TaskForm
};
