import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useSortable as h } from "@dnd-kit/sortable";
import { CSS as u } from "@dnd-kit/utilities";
import n from "../../../utils/classNames.js";
import y from "../../checkbox/Checkbox.js";
const w = (r) => {
  const { column: e, isDraggable: l, onColumnVisibilityChange: t } = r, { attributes: d, listeners: m, setActivatorNodeRef: c, setNodeRef: p, transform: b, transition: g, isDragging: f } = h({
    id: e.key,
    disabled: !l
  }), s = () => {
    e.disabled || t?.(e.key, !e.visible);
  };
  return /* @__PURE__ */ a(
    "li",
    {
      className: n(e.disabled && "disabled", f && "table-columns-dropdown-item-dragging"),
      ref: p,
      role: "presentation",
      style: { transform: u.Transform.toString(b), transition: g },
      children: /* @__PURE__ */ o(
        "a",
        {
          className: "display-flex gap-5 align-items-center justify-content-between",
          role: "menuitemcheckbox",
          "aria-checked": e.visible,
          onClick: (i) => {
            i.preventDefault(), s();
          },
          children: [
            /* @__PURE__ */ o("div", { className: "display-flex gap-10 align-items-center", children: [
              /* @__PURE__ */ a(
                y,
                {
                  checked: e.visible,
                  disabled: e.disabled,
                  onClick: (i) => i.stopPropagation(),
                  onChange: s,
                  className: "margin-top--4"
                }
              ),
              /* @__PURE__ */ a("div", { className: "table-columns-dropdown-item-label", children: e.label })
            ] }),
            /* @__PURE__ */ a(
              "div",
              {
                className: n(
                  "table-columns-dropdown-item-drag-handle",
                  !l && "table-columns-dropdown-item-drag-handle-disabled"
                ),
                ref: c,
                onClick: (i) => i.stopPropagation(),
                ...d,
                ...m,
                children: /* @__PURE__ */ a("span", { className: "rioglyph rioglyph-drag-n-drop" })
              }
            )
          ]
        }
      )
    }
  );
};
export {
  w as default
};
//# sourceMappingURL=TableColumnsDropdownItem.js.map
