const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../../locales/index.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index$1 = require("../../../DragSortList/index.js");
const require_recordBoardColumns = require("../../utils/recordBoardColumns.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _ant_design_icons = require("@ant-design/icons");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _pisell_icon_es_DotsSix = require("@pisell/icon/es/DotsSix");
_pisell_icon_es_DotsSix = require_runtime.__toESM(_pisell_icon_es_DotsSix);
//#region src/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.tsx
/**
* 列显示隐藏弹层内容：显隐切换 + 拖拽排序（参考 table Actions ColumnsSetting PopoverContent）。
*/
const prefix = "pisell-lowcode-";
function getColumnTitle(column) {
	const title = column.title;
	if (typeof title === "string") return title;
	return require_recordBoardColumns.getRecordBoardColumnKey(column) || "";
}
const ColumnSettingPopover = ({ columns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange }) => {
	const orderedColumns = (0, react.useMemo)(() => {
		if (!Array.isArray(columnOrder) || columnOrder.length === 0) return columns;
		const keyToCol = new Map(columns.map((c) => [require_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 = require_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 || onColumnOrderChange === void 0 || onColumnOrderChange(list.map((c) => require_recordBoardColumns.getRecordBoardColumnKey(c)).filter(Boolean));
	};
	const listContent = /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}table-action-column-content` }, typeof onColumnOrderChange === "function" ? /* @__PURE__ */ react.default.createElement(require_index$1.default, {
		list: orderedColumns,
		rowKey: (col) => require_recordBoardColumns.getRecordBoardColumnKey(col) || "",
		onChange: handleOrderChange
	}, ({ item: col, index, style, props, attributes, setActivatorNodeRef, listeners }) => {
		const colKey = require_recordBoardColumns.getRecordBoardColumnKey(col);
		const isShow = columnVisibility[colKey] !== false;
		return /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: colKey }, attributes), {}, {
			ref: props.ref,
			style,
			className: `${prefix}table-action-column-drag-item`
		}), /* @__PURE__ */ react.default.createElement(_pisell_icon_es_DotsSix.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ ref: setActivatorNodeRef }, listeners), {}, {
			style: { touchAction: "none" },
			className: `${prefix}table-action-column-drag-bar`
		})), /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ react.default.createElement("span", { className: (0, classnames.default)(`${prefix}table-action-column-drag-item-right-text`, { [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow }) }, getColumnTitle(col)), /* @__PURE__ */ 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__ */ react.default.createElement(_ant_design_icons.EyeOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.EyeInvisibleOutlined, null))));
	}) : orderedColumns.map((col) => {
		const colKey = require_recordBoardColumns.getRecordBoardColumnKey(col);
		const isShow = columnVisibility[colKey] !== false;
		return /* @__PURE__ */ react.default.createElement("div", {
			key: colKey,
			className: `${prefix}table-action-column-drag-item`,
			style: { cursor: "default" }
		}, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ react.default.createElement("span", { className: (0, classnames.default)(`${prefix}table-action-column-drag-item-right-text`, { [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow }) }, getColumnTitle(col)), /* @__PURE__ */ 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__ */ react.default.createElement(_ant_design_icons.EyeOutlined, null) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.EyeInvisibleOutlined, null))));
	}));
	return /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ react.default.createElement("span", { className: `${prefix}table-action-column-header-title` }, require_index.getText("table-action-column-title"))), listContent);
};
//#endregion
exports.default = ColumnSettingPopover;
