var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.tsx
var ColumnSettingPopover_exports = {};
__export(ColumnSettingPopover_exports, {
  default: () => ColumnSettingPopover_default
});
module.exports = __toCommonJS(ColumnSettingPopover_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_DotsSix = __toESM(require("@pisell/icon/es/DotsSix"));
var import_icons = require("@ant-design/icons");
var import_locales = require("../../../../locales");
var import_DragSortList = __toESM(require("../../../DragSortList"));
var import_recordBoardColumns = require("../../utils/recordBoardColumns");
var prefix = "pisell-lowcode-";
function getColumnTitle(column) {
  const title = column.title;
  if (typeof title === "string") return title;
  return (0, import_recordBoardColumns.getRecordBoardColumnKey)(column) || "";
}
var ColumnSettingPopover = ({
  columns,
  columnVisibility,
  onColumnVisibilityChange,
  columnOrder,
  onColumnOrderChange
}) => {
  const orderedColumns = (0, import_react.useMemo)(() => {
    if (!Array.isArray(columnOrder) || columnOrder.length === 0) return columns;
    const keyToCol = new Map(
      columns.map((c) => [(0, import_recordBoardColumns.getRecordBoardColumnKey)(c), c])
    );
    const result = [];
    for (const key of columnOrder) {
      const col = keyToCol.get(key);
      if (col) result.push(col);
    }
    columns.forEach((col) => {
      const key = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
      if (!columnOrder.includes(key)) result.push(col);
    });
    return result;
  }, [columns, columnOrder]);
  const handleToggle = (colKey, isShow) => {
    onColumnVisibilityChange({ [colKey]: isShow });
  };
  const handleOrderChange = (list) => {
    onColumnOrderChange == null ? void 0 : onColumnOrderChange(
      list.map((c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c)).filter(Boolean)
    );
  };
  const listContent = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-content` }, typeof onColumnOrderChange === "function" ? /* @__PURE__ */ import_react.default.createElement(
    import_DragSortList.default,
    {
      list: orderedColumns,
      rowKey: (col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col) || "",
      onChange: handleOrderChange
    },
    ({
      item: col,
      index,
      style,
      props,
      attributes,
      setActivatorNodeRef,
      listeners
    }) => {
      const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
      const isShow = columnVisibility[colKey] !== false;
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: colKey,
          ...attributes,
          ref: props.ref,
          style,
          className: `${prefix}table-action-column-drag-item`
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_DotsSix.default,
          {
            ref: setActivatorNodeRef,
            ...listeners,
            style: { touchAction: "none" },
            className: `${prefix}table-action-column-drag-bar`
          }
        ),
        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ import_react.default.createElement(
          "span",
          {
            className: (0, import_classnames.default)(
              `${prefix}table-action-column-drag-item-right-text`,
              {
                [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow
              }
            )
          },
          getColumnTitle(col)
        ), /* @__PURE__ */ import_react.default.createElement(
          "span",
          {
            className: `${prefix}table-action-column-drag-item-right-icon-wrap`,
            onClick: () => handleToggle(colKey, !isShow),
            role: "button",
            "aria-label": isShow ? "hide" : "show"
          },
          isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
        ))
      );
    }
  ) : orderedColumns.map((col) => {
    const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
    const isShow = columnVisibility[colKey] !== false;
    return /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: colKey,
        className: `${prefix}table-action-column-drag-item`,
        style: { cursor: "default" }
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ import_react.default.createElement(
        "span",
        {
          className: (0, import_classnames.default)(
            `${prefix}table-action-column-drag-item-right-text`,
            {
              [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow
            }
          )
        },
        getColumnTitle(col)
      ), /* @__PURE__ */ import_react.default.createElement(
        "span",
        {
          className: `${prefix}table-action-column-drag-item-right-icon-wrap`,
          onClick: () => handleToggle(colKey, !isShow),
          role: "button",
          "aria-label": isShow ? "hide" : "show"
        },
        isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
      ))
    );
  }));
  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}table-action-column-header-title` }, (0, import_locales.getText)("table-action-column-title"))), listContent);
};
var ColumnSettingPopover_default = ColumnSettingPopover;
