import { getText } from "../../../../locales/index.js";
import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import Sortable from "../../../DragSortList/index.js";
import { getRecordBoardColumnKey } from "../../utils/recordBoardColumns.js";
import React, { useMemo } from "react";
import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
import classNames from "classnames";
import DotsSix from "@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 getRecordBoardColumnKey(column) || "";
}
const ColumnSettingPopover = ({ columns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange }) => {
	const orderedColumns = useMemo(() => {
		if (!Array.isArray(columnOrder) || columnOrder.length === 0) return columns;
		const keyToCol = new Map(columns.map((c) => [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 = 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) => getRecordBoardColumnKey(c)).filter(Boolean));
	};
	const listContent = /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-column-content` }, typeof onColumnOrderChange === "function" ? /* @__PURE__ */ React.createElement(Sortable, {
		list: orderedColumns,
		rowKey: (col) => getRecordBoardColumnKey(col) || "",
		onChange: handleOrderChange
	}, ({ item: col, index, style, props, attributes, setActivatorNodeRef, listeners }) => {
		const colKey = getRecordBoardColumnKey(col);
		const isShow = columnVisibility[colKey] !== false;
		return /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({ key: colKey }, attributes), {}, {
			ref: props.ref,
			style,
			className: `${prefix}table-action-column-drag-item`
		}), /* @__PURE__ */ React.createElement(DotsSix, _objectSpread2(_objectSpread2({ ref: setActivatorNodeRef }, listeners), {}, {
			style: { touchAction: "none" },
			className: `${prefix}table-action-column-drag-bar`
		})), /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefix}table-action-column-drag-item-right-text`, { [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow }) }, getColumnTitle(col)), /* @__PURE__ */ React.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.createElement(EyeOutlined, null) : /* @__PURE__ */ React.createElement(EyeInvisibleOutlined, null))));
	}) : orderedColumns.map((col) => {
		const colKey = getRecordBoardColumnKey(col);
		const isShow = columnVisibility[colKey] !== false;
		return /* @__PURE__ */ React.createElement("div", {
			key: colKey,
			className: `${prefix}table-action-column-drag-item`,
			style: { cursor: "default" }
		}, /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefix}table-action-column-drag-item-right-text`, { [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow }) }, getColumnTitle(col)), /* @__PURE__ */ React.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.createElement(EyeOutlined, null) : /* @__PURE__ */ React.createElement(EyeInvisibleOutlined, null))));
	}));
	return /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ React.createElement("span", { className: `${prefix}table-action-column-header-title` }, getText("table-action-column-title"))), listContent);
};
//#endregion
export { ColumnSettingPopover as default };
