import { getText } from "../../../../../locales/index.js";
import React, { useMemo } from "react";
import { Select, Tooltip } from "antd";
import HelpCircle from "@pisell/icon/es/HelpCircle";
import "./PopoverContent.less";
//#region src/components/table/Actions/component/Group/PopoverContent.tsx
const prefix = "pisell-lowcode-";
const PopoverContent = (props) => {
	const { columns, value = [], onChange } = props;
	const firstValue = (value === null || value === void 0 ? void 0 : value[0]) || {};
	const handleFieldChange = (value) => {
		if (!value) {
			onChange === null || onChange === void 0 || onChange([]);
			return;
		}
		onChange === null || onChange === void 0 || onChange([{ field: value }]);
	};
	const options = useMemo(() => {
		return (columns || []).filter((item) => !(item === null || item === void 0 ? void 0 : item.isHidden)).map((item) => ({
			label: item.label,
			value: `${item.name}`
		}));
	}, [columns]);
	return /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-group-popover-content-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${prefix}table-action-group-header` }, /* @__PURE__ */ React.createElement("span", { className: `${prefix}table-action-group-header-title` }, getText("table-action-group-by-title")), /* @__PURE__ */ React.createElement(Tooltip, { title: getText("table-action-group-by-title-tip") }, /* @__PURE__ */ React.createElement(HelpCircle, null))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, {
		options,
		value: firstValue.field,
		onChange: handleFieldChange,
		style: { width: 200 },
		allowClear: true
	}))));
};
//#endregion
export { PopoverContent as default };
