import { jsx, jsxs } from "react/jsx-runtime";
import { a as useSensors, b as useSensor, D as DndContext, c as closestCenter, d as DragOverlay, K as KeyboardSensor, T as TouchSensor, M as MouseSensor } from "../../core.esm-Ce6wsWiy.js";
import { a as arrayMove } from "../../sortable.esm-CQM3vY1X.js";
import { useState, useMemo, useId } from "react";
import { createPortal } from "react-dom";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { KanbanContext } from "./kanban-context.js";
import { Card } from "../card/card.js";
const KanbanProvider = ({
  children,
  onDragStart,
  onDragEnd,
  onDragOver,
  className,
  columns,
  data,
  onDataChange,
  ...props
}) => {
  const [activeCardId, setActiveCardId] = useState(null);
  const [isDropping, setIsDropping] = useState(false);
  const activeCard = useMemo(() => {
    if (!activeCardId) return null;
    return data.find((item) => item.id === activeCardId) || null;
  }, [activeCardId, data]);
  const sensors = useSensors(
    useSensor(MouseSensor, {
      activationConstraint: {
        distance: 8
        // Require 8px of movement before drag starts
      }
    }),
    useSensor(TouchSensor, {
      activationConstraint: {
        distance: 8
        // Require 8px of movement before drag starts
      }
    }),
    useSensor(KeyboardSensor)
  );
  const handleDragStart = (event) => {
    const card = data.find((item) => item.id === event.active.id);
    if (card) {
      setActiveCardId(event.active.id);
    }
    onDragStart?.(event);
  };
  const handleDragOver = (event) => {
    const { active, over } = event;
    if (!over) {
      return;
    }
    const activeItem = data.find((item) => item.id === active.id);
    const overItem = data.find((item) => item.id === over.id);
    if (!activeItem) {
      return;
    }
    const activeColumn = activeItem.column;
    const overColumn = overItem?.column || columns.find((col) => col.id === over.id)?.id || columns[0]?.id;
    if (activeColumn !== overColumn) {
      let newData = [...data];
      const activeIndex = newData.findIndex((item) => item.id === active.id);
      const overIndex = newData.findIndex((item) => item.id === over.id);
      newData[activeIndex].column = overColumn;
      newData = arrayMove(newData, activeIndex, overIndex);
      onDataChange?.(newData);
    }
    onDragOver?.(event);
  };
  const handleDragEnd = (event) => {
    const { active, over } = event;
    setIsDropping(true);
    onDragEnd?.(event);
    if (!over || active.id === over.id) {
      setTimeout(() => {
        setActiveCardId(null);
        setIsDropping(false);
      }, 200);
      return;
    }
    let newData = [...data];
    const oldIndex = newData.findIndex((item) => item.id === active.id);
    const newIndex = newData.findIndex((item) => item.id === over.id);
    newData = arrayMove(newData, oldIndex, newIndex);
    onDataChange?.(newData);
    setTimeout(() => {
      setActiveCardId(null);
      setIsDropping(false);
    }, 200);
  };
  const announcements = {
    onDragStart({ active }) {
      const { name, column } = data.find((item) => item.id === active.id) ?? {};
      return `Picked up the card "${name}" from the "${column}" column`;
    },
    onDragOver({ active, over }) {
      const { name } = data.find((item) => item.id === active.id) ?? {};
      const newColumn = columns.find((column) => column.id === over?.id)?.name;
      return `Dragged the card "${name}" over the "${newColumn}" column`;
    },
    onDragEnd({ active, over }) {
      const { name } = data.find((item) => item.id === active.id) ?? {};
      const newColumn = columns.find((column) => column.id === over?.id)?.name;
      return `Dropped the card "${name}" into the "${newColumn}" column`;
    },
    onDragCancel({ active }) {
      const { name } = data.find((item) => item.id === active.id) ?? {};
      return `Cancelled dragging the card "${name}"`;
    }
  };
  const id = useId();
  return /* @__PURE__ */ jsx(KanbanContext.Provider, { value: { columns, data, activeCardId, isDropping }, children: /* @__PURE__ */ jsxs(
    DndContext,
    {
      id,
      accessibility: { announcements },
      collisionDetection: closestCenter,
      onDragEnd: handleDragEnd,
      onDragOver: handleDragOver,
      onDragStart: handleDragStart,
      sensors,
      ...props,
      children: [
        /* @__PURE__ */ jsx("div", { className: cn("flex size-full gap-3 overflow-x-auto", className), children: columns.map((column) => children(column)) }),
        typeof window !== "undefined" && createPortal(
          /* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(Card, { className: "cursor-grabbing rounded-lg border-0 p-3 shadow-lg opacity-90 text-base", children: /* @__PURE__ */ jsx("p", { className: "m-0 font-medium text-base", children: activeCard.name }) }) }),
          document.body
        )
      ]
    }
  ) });
};
export {
  KanbanProvider
};
