import { jsx as f } from "react/jsx-runtime";
import { useState as y, useCallback as r, useMemo as S } from "react";
import V from "../../hooks/useDataTableStaticContext.js";
import h from "../../../jtl-dropdown/types/DropdownItem.js";
import w from "../../../jtl-dropdown/JTLDropdown.js";
import x from "../../../button/Button.js";
const z = ({ value: n, onChange: i }) => {
  const { columns: o } = V(), [l, k] = y(
    o.reduce(
      (t, e) => (n && n.length > 0 ? t[e.key] = n.includes(e) : t[e.key] = !0, t),
      {}
    )
  ), u = r((t, e) => ({ ...t, [e]: !t[e] }), []), m = r(
    (t) => o.filter((e) => t[e.key]),
    [o]
  ), a = r(() => o.reduce(
    (t, e) => (t[e.key] = !0, t),
    {}
  ), [o]), s = r(
    (t) => {
      i == null || i(t);
    },
    [i]
  ), c = r(() => {
    const t = a();
    return s(o), t;
  }, [o, a, s]), b = r(
    (t) => {
      k((e) => {
        const p = u(e, t), d = m(p);
        return d.length === 0 ? c() : (s(d), p);
      });
    },
    [u, m, c, s]
  ), C = S(
    () => o.map((t) => ({
      type: h.Checkbox,
      label: t.title,
      onClick: () => b(t.key),
      isSelected: l[t.key]
    })),
    [o, l, b]
  );
  return /* @__PURE__ */ f(w, { menuItems: C, position: "right", children: /* @__PURE__ */ f(x, { variant: "outline", size: "sm", icon: "Columns3", iconPosition: "right", "aria-label": "Spalten" }) });
};
export {
  z as default
};
//# sourceMappingURL=DataTableColumnSelector.js.map
