"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { Input } from '../../../../../../../ui/src/components/input.mjs';
import { Label } from '../../../../../../../ui/src/components/label.mjs';
import { useColumnMutations } from '../../hooks/kanban-hooks.mjs';

function ColumnForm({
  boardId,
  columnId,
  column,
  onClose,
  onSuccess
}) {
  const isEditing = !!columnId;
  const { createColumn, updateColumn, isCreating, isUpdating } = useColumnMutations();
  const [title, setTitle] = useState(column?.title || "");
  const [error, setError] = useState(null);
  const isPending = isCreating || isUpdating;
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    if (!title.trim()) {
      setError("Title is required");
      return;
    }
    try {
      if (isEditing && columnId) {
        await updateColumn(columnId, { title });
      } else {
        await createColumn({ title, boardId });
      }
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred");
    }
  };
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title *" }),
      /* @__PURE__ */ jsx(
        Input,
        {
          id: "title",
          value: title,
          onChange: (e) => setTitle(e.target.value),
          placeholder: "e.g., To Do",
          disabled: isPending
        }
      )
    ] }),
    error && /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: error }),
    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Column" : "Create Column" }),
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "outline",
          onClick: onClose,
          disabled: isPending,
          children: "Cancel"
        }
      )
    ] })
  ] });
}

export { ColumnForm };
