"use client";
import { jsxs as f, jsx as r } from "react/jsx-runtime";
import { useState as k } from "react";
import { Button as b } from "../../../button.js";
import { Icon as C } from "../../../icon.js";
import { Popover as H, PopoverTrigger as _, PopoverContent as $ } from "../../../popover.js";
import { getIconFromColumnType as z } from "../data-table.service.js";
function W({
  table: u,
  visibleColumns: Y,
  hiddenColumns: B,
  i18n: x
}) {
  const [c, m] = k({ section: null, position: -1, itemId: null }), [O, T] = k(!1), d = (e) => e.id, V = (e) => {
    const t = e.columnDef.meta?.headerLabel;
    if (t) return String(t);
    const i = e.columnDef.header;
    return typeof i == "string" ? i : d(e);
  }, D = (e) => d(e) === "data-table-integrated-checkbox-column" || e.columnDef.enableHiding === !1, P = () => {
    const e = u?.getState?.().columnOrder || [];
    return e && e.length > 0 ? [...e] : (u?.getAllLeafColumns?.() || []).map((i) => i.id);
  }, j = (e, t) => {
    e.dataTransfer.setData("text/column-id", t), e.dataTransfer.effectAllowed = "move", T(!0);
  }, A = () => {
    T(!1), m({ section: null, position: -1, itemId: null });
  }, E = (e) => {
    const t = e.currentTarget, i = Array.from(t.querySelectorAll("[data-column-item]")), o = e.clientY;
    for (let n = 0; n < i.length; n++) {
      const a = i[n].getBoundingClientRect(), l = a.top + a.height / 2;
      if (o < l)
        return n;
    }
    return i.length;
  }, w = (e, t, i) => {
    const o = u?.getColumn?.(e);
    if (!o || D(o))
      return;
    const n = o.getIsVisible(), s = t === "visible" ? g : N;
    if (t === "visible" && i === 0)
      return;
    (t === "visible" && !n || t === "hidden" && n) && o.toggleVisibility(t === "visible");
    const a = P(), l = s.map(d), p = a.indexOf(e);
    if (p === -1) return;
    const h = [...a];
    h.splice(p, 1);
    let v = 0;
    if (i < l.length && i >= 0) {
      const I = l[i];
      v = h.indexOf(I), v === -1 && (v = h.length);
    } else {
      const I = l[l.length - 1];
      I && (v = h.indexOf(I) + 1);
    }
    h.splice(v, 0, e), u.setColumnOrder(h);
  }, S = (e, t, i, o) => {
    e.preventDefault(), e.stopPropagation(), e.dataTransfer.dropEffect = "move";
    const n = e.currentTarget.getBoundingClientRect(), s = e.clientY, a = n.top + n.height / 2, l = s < a ? o : o + 1;
    m({
      section: t,
      position: l,
      itemId: i
    });
  }, L = (e) => (t) => {
    t.preventDefault(), t.dataTransfer.dropEffect = "move";
    const i = E(t);
    m({
      section: e,
      position: e === "visible" && i === 0 ? 1 : i,
      itemId: null
    });
  }, M = (e) => (t) => {
    t.preventDefault(), t.stopPropagation();
    const i = t.dataTransfer.getData("text/column-id");
    if (!i) return;
    const o = c.position !== -1 ? c.position : E(t);
    w(i, e, e === "visible" && o === 0 ? 1 : o), m({ section: null, position: -1, itemId: null });
  }, F = P(), G = (u?.getAllLeafColumns?.() || []).map(
    (e) => e.id
  ), R = new Map(
    G.map((e, t) => [e, t])
  ), y = (e) => {
    const t = F.indexOf(e);
    if (t !== -1) return t;
    const i = R.get(e);
    return i !== void 0 ? i : Number.MAX_SAFE_INTEGER;
  }, g = [...Y].filter((e) => !D(e)).sort((e, t) => y(d(e)) - y(d(t))), N = [...B].filter((e) => !D(e)).sort((e, t) => y(d(e)) - y(d(t)));
  return /* @__PURE__ */ f(H, { children: [
    /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ r(
      b,
      {
        className: "h-6 w-6",
        iconLeft: "Eye",
        size: "icon",
        variant: "ghost"
      }
    ) }),
    /* @__PURE__ */ f($, { className: "flex flex-col gap-2 px-3 py-2", align: "end", children: [
      g.length > 0 && /* @__PURE__ */ f(
        "div",
        {
          className: "flex max-h-[250px] flex-col",
          onDragOver: L("visible"),
          onDrop: M("visible"),
          children: [
            /* @__PURE__ */ f("div", { className: "flex flex-row items-center justify-between gap-2", children: [
              /* @__PURE__ */ r("div", { className: "text-d-foreground text-sm", children: x.columnVisibility.visibleColumns }),
              /* @__PURE__ */ r(
                b,
                {
                  variant: "ghost",
                  size: "sm",
                  className: "text-xs",
                  onClick: () => {
                    u.setColumnVisibility(() => {
                      const e = [...g, ...N], t = d(g[0] ?? e[0]);
                      return e.reduce(
                        (o, n) => {
                          const s = d(n);
                          return s && (o[s] = s === t), o;
                        },
                        {}
                      );
                    });
                  },
                  children: x.columnVisibility.hideAll
                }
              )
            ] }),
            /* @__PURE__ */ r("div", { className: "border-d-border flex min-h-0 flex-1 flex-col overflow-y-auto border-b", children: g.map((e, t) => {
              const i = d(e), o = t === 0, n = D(e), s = c.section === "visible" && c.position === t && t > 0, a = c.section === "visible" && c.position === t + 1;
              return /* @__PURE__ */ f("div", { className: "relative", children: [
                s && /* @__PURE__ */ r("div", { className: "bg-d-primary absolute -top-1 right-0 left-0 z-10 h-0.5 rounded-full" }),
                /* @__PURE__ */ r(
                  "div",
                  {
                    "data-column-item": !0,
                    draggable: !o && !n,
                    onDragStart: (l) => {
                      if (o || n) {
                        l.preventDefault();
                        return;
                      }
                      j(l, i);
                    },
                    onDragEnd: A,
                    onDragOver: (l) => {
                      if (t === 0) {
                        l.dataTransfer.dropEffect = "none";
                        return;
                      }
                      S(l, "visible", i, t);
                    },
                    onDrop: (l) => {
                      l.preventDefault(), l.stopPropagation();
                      const p = l.dataTransfer.getData("text/column-id");
                      p && p !== i && t > 0 && w(
                        p,
                        "visible",
                        Math.max(1, t)
                      ), m({
                        section: null,
                        position: -1,
                        itemId: null
                      });
                    },
                    className: `rounded transition-all duration-150 ${o || n ? "cursor-not-allowed opacity-60" : O && c.itemId === i ? "scale-95 opacity-50" : "hover:bg-d-foreground/5"}`,
                    children: /* @__PURE__ */ r(
                      b,
                      {
                        variant: "ghost",
                        className: "w-full cursor-grab justify-start",
                        iconLeft: "GripVertical",
                        onClick: () => {
                          n || e.toggleVisibility();
                        },
                        disabled: i === d(g[0]) || n,
                        children: /* @__PURE__ */ f("div", { className: "flex w-full flex-row items-center justify-between gap-1", children: [
                          /* @__PURE__ */ r(
                            C,
                            {
                              name: z(
                                e.columnDef.meta?.type
                              ),
                              className: "h-4 w-4"
                            }
                          ),
                          /* @__PURE__ */ r("div", { className: "flex flex-1", children: V(e) }),
                          /* @__PURE__ */ r(C, { name: "Eye" })
                        ] })
                      },
                      i
                    )
                  }
                ),
                a && /* @__PURE__ */ r("div", { className: "bg-d-primary absolute right-0 -bottom-1 left-0 z-10 h-0.5 rounded-full" })
              ] }, i);
            }) })
          ]
        }
      ),
      N.length > 0 && /* @__PURE__ */ f(
        "div",
        {
          className: "flex max-h-[250px] flex-col",
          onDragOver: L("hidden"),
          onDrop: M("hidden"),
          children: [
            /* @__PURE__ */ f("div", { className: "flex flex-row items-center justify-between gap-2", children: [
              /* @__PURE__ */ r("div", { className: "text-d-foreground text-sm", children: x.columnVisibility.hiddenColumns }),
              /* @__PURE__ */ r(
                b,
                {
                  variant: "ghost",
                  size: "sm",
                  className: "text-xs",
                  onClick: () => u.setColumnVisibility({}),
                  children: x.columnVisibility.showAll
                }
              )
            ] }),
            /* @__PURE__ */ r("div", { className: "border-d-border flex min-h-0 flex-1 flex-col overflow-y-auto border-b", children: N.map((e, t) => {
              const i = d(e), o = c.section === "hidden" && c.position === t, n = c.section === "hidden" && c.position === t + 1;
              return /* @__PURE__ */ f("div", { className: "relative", children: [
                o && /* @__PURE__ */ r("div", { className: "bg-d-primary absolute -top-1 right-0 left-0 z-10 h-0.5 rounded-full" }),
                /* @__PURE__ */ r(
                  "div",
                  {
                    "data-column-item": !0,
                    draggable: !0,
                    onDragStart: (s) => j(s, i),
                    onDragEnd: A,
                    onDragOver: (s) => S(s, "hidden", i, t),
                    onDrop: (s) => {
                      s.preventDefault(), s.stopPropagation();
                      const a = s.dataTransfer.getData("text/column-id");
                      a && a !== i && w(a, "hidden", t), m({
                        section: null,
                        position: -1,
                        itemId: null
                      });
                    },
                    className: `rounded transition-all duration-150 ${O && c.itemId === i ? "scale-95 opacity-50" : "hover:bg-d-foreground/5"}`,
                    children: /* @__PURE__ */ r(
                      b,
                      {
                        variant: "ghost",
                        className: "w-full justify-start",
                        iconLeft: "GripVertical",
                        onClick: () => e.toggleVisibility(),
                        children: /* @__PURE__ */ f("div", { className: "flex w-full flex-row items-center justify-between gap-1", children: [
                          /* @__PURE__ */ r(
                            C,
                            {
                              name: z(
                                e.columnDef.meta?.type
                              ),
                              className: "h-4 w-4"
                            }
                          ),
                          /* @__PURE__ */ r("div", { className: "flex flex-1", children: V(e) }),
                          /* @__PURE__ */ r(C, { name: "EyeOff" })
                        ] })
                      },
                      i
                    )
                  }
                ),
                n && /* @__PURE__ */ r("div", { className: "bg-d-primary absolute right-0 -bottom-1 left-0 z-10 h-0.5 rounded-full" })
              ] }, i);
            }) })
          ]
        }
      )
    ] })
  ] });
}
export {
  W as DataTableColumnVisibility
};
