"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { memo, useMemo } from 'react';
import { Kanban as KanbanRoot, KanbanBoard as KanbanBoard$1, KanbanOverlay } from '../../../../../../../ui/src/components/kanban.mjs';
import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
import { ColumnContent } from './column-content.mjs';

function KanbanBoardComponent({
  columns,
  kanbanState,
  onKanbanChange,
  onAddTask,
  onEditTask,
  onEditColumn,
  onDeleteColumn
}) {
  const orderedColumns = useMemo(() => {
    const columnMap = new Map(columns.map((c) => [c.id, c]));
    return Object.keys(kanbanState).map((columnId) => {
      const column = columnMap.get(columnId);
      if (!column) return null;
      return {
        ...column,
        tasks: kanbanState[columnId] || []
      };
    }).filter(
      (c) => c !== null
    );
  }, [columns, kanbanState]);
  const mdClass = useMemo(() => {
    const gridClassMap = {
      1: "md:grid-cols-1",
      2: "md:grid-cols-2",
      3: "md:grid-cols-3",
      4: "md:grid-cols-4",
      5: "md:grid-cols-5",
      6: "md:grid-cols-6"
    };
    return gridClassMap[orderedColumns.length] || "md:grid-cols-6";
  }, [orderedColumns.length]);
  return /* @__PURE__ */ jsxs(
    KanbanRoot,
    {
      orientation: "horizontal",
      value: kanbanState,
      onValueChange: onKanbanChange,
      getItemValue: (item) => item.id,
      children: [
        /* @__PURE__ */ jsx(
          KanbanBoard$1,
          {
            className: cn(
              "flex flex-col gap-4 md:auto-rows-fr md:grid-cols-1 md:grid min-h-[400px]",
              mdClass
            ),
            children: orderedColumns.map((column) => /* @__PURE__ */ jsx(
              ColumnContent,
              {
                column,
                onAddTask: () => onAddTask(column.id),
                onEditTask: (taskId) => onEditTask(column.id, taskId),
                onEditColumn: () => onEditColumn(column.id),
                onDeleteColumn: () => onDeleteColumn(column.id)
              },
              column.id
            ))
          }
        ),
        /* @__PURE__ */ jsx(KanbanOverlay, { children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-md bg-primary/10" }) })
      ]
    }
  );
}
const KanbanBoard = memo(KanbanBoardComponent);

export { KanbanBoard };
