import { jsx as s, jsxs as c, Fragment as k } from "react/jsx-runtime";
import { useSensors as B, useSensor as w, PointerSensor as M, KeyboardSensor as R, DndContext as A, closestCenter as P } from "@dnd-kit/core";
import { sortableKeyboardCoordinates as G, SortableContext as V, verticalListSortingStrategy as j } from "@dnd-kit/sortable";
import { useState as x, useEffect as H } from "react";
import v from "../../../utils/classNames.js";
import W from "../../../utils/arrayMove.js";
import z from "../../dropdown/ButtonDropdown.js";
import { TABLE_HORIZONTAL_SCROLL_EVENT as S } from "../layout/useHorizontalSectionSync.js";
import F from "./TableColumnsDropdownItem.js";
const U = 4, C = (o) => o.draggable !== !1 && !o.disabled && !o.hideLabel, Z = (o, t, n) => Math.min(Math.max(o, Math.min(t, n)), Math.max(t, n)), q = (o) => ({ containerNodeRect: t, draggingNodeRect: n, transform: r }) => !t || !n ? {
  ...r,
  x: 0
} : {
  ...r,
  x: 0,
  y: Z(
    r.y,
    t.top + o - n.top,
    t.bottom - o - n.bottom
  )
}, J = q(U), Q = (o, t, n) => {
  const r = o.filter(C).map((a) => a.key), l = r.indexOf(t), i = r.indexOf(n);
  if (l < 0 || i < 0)
    return;
  const p = W(r, l, i);
  let d = 0;
  return o.map((a) => {
    if (!C(a))
      return a.key;
    const f = p[d];
    return d += 1, f ?? a.key;
  });
}, ae = (o) => {
  const {
    columns: t,
    onColumnOrderChange: n,
    onColumnVisibilityChange: r,
    onReset: l,
    label: i,
    resetLabel: p,
    showResetButton: d = !1,
    className: a,
    toggleClassName: f,
    dropdownClassName: L
  } = o, [N, m] = x(!1), [O, g] = x(!1), E = typeof n == "function", u = typeof l == "function", y = t.filter((e) => !e.hideLabel);
  H(() => {
    const e = () => m(!1);
    return window.addEventListener(S, e), () => window.removeEventListener(S, e);
  }, []);
  const K = B(
    w(M, { activationConstraint: { distance: 6 } }),
    w(R, { coordinateGetter: G })
  ), T = (e) => {
    g(!0);
  }, _ = (e) => {
    g(!1);
    const D = String(e.active.id), h = e.over ? String(e.over.id) : void 0;
    if (!h || D === h)
      return;
    const b = Q(t, D, h);
    b && n?.(b);
  }, I = () => {
    u && (m(!1), l());
  };
  return /* @__PURE__ */ s(
    z,
    {
      title: /* @__PURE__ */ c("span", { className: "display-inline-flex align-items-center gap-5", children: [
        /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-table-view" }),
        /* @__PURE__ */ s("span", { children: i })
      ] }),
      noCaret: !0,
      open: N,
      onOpen: () => m(!0),
      onClose: () => m(!1),
      className: a,
      toggleClassName: f,
      dropdownClassName: v(
        "min-width-200 max-height-75vh overflow-y-auto overflow-x-hidden",
        O && "table-columns-dropdown-dragging",
        L
      ),
      pullRight: !0,
      customDropdown: /* @__PURE__ */ c(
        A,
        {
          sensors: K,
          collisionDetection: P,
          modifiers: [J],
          onDragStart: T,
          onDragEnd: _,
          onDragCancel: () => g(!1),
          children: [
            /* @__PURE__ */ s(
              V,
              {
                items: y.map((e) => e.key),
                strategy: j,
                children: y.map((e) => /* @__PURE__ */ s(
                  F,
                  {
                    column: e,
                    isDraggable: E && C(e),
                    onColumnVisibilityChange: r
                  },
                  e.key
                ))
              }
            ),
            d && /* @__PURE__ */ c(k, { children: [
              /* @__PURE__ */ s("li", { className: "divider", role: "separator" }),
              /* @__PURE__ */ s("li", { className: v(!u && "disabled"), role: "presentation", children: /* @__PURE__ */ c(
                "a",
                {
                  className: "display-flex align-items-center gap-10",
                  role: "menuitem",
                  "aria-disabled": !u,
                  onClick: (e) => {
                    e.preventDefault(), I();
                  },
                  children: [
                    /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-refresh" }),
                    /* @__PURE__ */ s("span", { children: p })
                  ]
                }
              ) })
            ] })
          ]
        }
      )
    }
  );
};
export {
  ae as default
};
//# sourceMappingURL=TableColumnsDropdown.js.map
