const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../../../locales/index.js");
const require_useSharedState = require("../../../../../hooks/useSharedState.js");
const require_model = require("../../../model.js");
const require_PopoverContent = require("../ColumnsSetting/PopoverContent.js");
const require_index$1 = require("../ButtonIcon/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _ant_design_icons = require("@ant-design/icons");
require("./index.less");
//#region src/components/table/Actions/component/GallerySetting/index.tsx
const prefix = "pisell-lowcode-";
const LabelShow = (props) => {
	const { value, onChange } = props;
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, value ? /* @__PURE__ */ react.default.createElement(_ant_design_icons.EyeOutlined, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(false) }) : /* @__PURE__ */ react.default.createElement(_ant_design_icons.EyeInvisibleOutlined, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(true) }));
};
const GallerySetting = (props) => {
	const { setting } = props;
	const { state } = require_useSharedState.default(require_model.Context);
	const { defaultColumns } = state;
	const { cover } = setting;
	const { fields, show } = cover;
	const form = antd.Form.useFormInstance();
	const column_setting = antd.Form.useWatch("column_setting", {
		form,
		preserve: true
	}) || [];
	const isActive = (0, react.useMemo)(() => {
		return column_setting.some((item) => !item.isShow);
	}, [column_setting]);
	const coverFieldOptions = (0, react.useMemo)(() => {
		return [{
			value: "noCover",
			label: require_index.getText("table-action-gallery-no-cover")
		}, ...(fields || []).map((field) => {
			const column = defaultColumns.find((col) => col.key === field);
			return {
				value: `${column.dataIndex}`,
				label: column.title
			};
		}).filter(Boolean)];
	}, [defaultColumns, fields]);
	const headerContent = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header` }, /* @__PURE__ */ react.default.createElement(antd.Space, {
			direction: "vertical",
			style: { width: "100%" }
		}, show && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ react.default.createElement("div", null, require_index.getText("table-action-gallery-cover-content")), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: ["gallery_setting", "coverField"],
			noStyle: true
		}, /* @__PURE__ */ react.default.createElement(antd.Select, {
			options: coverFieldOptions,
			style: { width: 120 }
		})))), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			noStyle: true,
			shouldUpdate: (prevValues, currentValues) => {
				var _prevValues$gallery_s, _currentValues$galler;
				return ((_prevValues$gallery_s = prevValues.gallery_setting) === null || _prevValues$gallery_s === void 0 ? void 0 : _prevValues$gallery_s.coverField) !== ((_currentValues$galler = currentValues.gallery_setting) === null || _currentValues$galler === void 0 ? void 0 : _currentValues$galler.coverField);
			}
		}, ({ getFieldValue }) => getFieldValue(["gallery_setting", "coverField"]) !== "noCover" ? /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ react.default.createElement("div", null, require_index.getText("table-action-gallery-cover-effect")), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: ["gallery_setting", "coverObjectFit"],
			noStyle: true
		}, /* @__PURE__ */ react.default.createElement(antd.Segmented, { options: [{
			label: require_index.getText("table-action-gallery-cover-fit-fill"),
			value: "fill"
		}, {
			label: require_index.getText("table-action-gallery-cover-fit-cover"),
			value: "cover"
		}] })))) : null), /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: "0" } })), /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ react.default.createElement("div", null, require_index.getText("table-action-gallery-display-mode")), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: ["gallery_setting", "compactMode"],
			noStyle: true
		}, /* @__PURE__ */ react.default.createElement(antd.Segmented, { options: [{
			label: require_index.getText("table-action-gallery-display-mode-default"),
			value: "default"
		}, {
			label: require_index.getText("table-action-gallery-display-mode-compact"),
			value: "compact"
		}] })))), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			noStyle: true,
			shouldUpdate: (prevValues, currentValues) => {
				var _prevValues$gallery_s2, _currentValues$galler2;
				return ((_prevValues$gallery_s2 = prevValues.gallery_setting) === null || _prevValues$gallery_s2 === void 0 ? void 0 : _prevValues$gallery_s2.compactMode) !== ((_currentValues$galler2 = currentValues.gallery_setting) === null || _currentValues$galler2 === void 0 ? void 0 : _currentValues$galler2.compactMode);
			}
		}, ({ getFieldValue }) => getFieldValue(["gallery_setting", "compactMode"]) === "default" ? /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ react.default.createElement("div", null, require_index.getText("table-action-gallery-display-field-name")), /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}gallery-setting-header-item-icon-wrap` }, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: ["gallery_setting", "isShowLabel"],
			noStyle: true
		}, /* @__PURE__ */ react.default.createElement(LabelShow, null)))) : null)), /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: "8px 0 0" } }));
	}, [coverFieldOptions]);
	const content = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: ["column_setting"],
			noStyle: true
		}, /* @__PURE__ */ react.default.createElement(require_PopoverContent.default, {
			isShowTitle: false,
			headerContent
		}));
	}, [headerContent]);
	return /* @__PURE__ */ react.default.createElement(antd.Popover, {
		content,
		arrow: false,
		placement: "bottomRight",
		trigger: "click"
	}, /* @__PURE__ */ react.default.createElement(require_index$1.default, { isActive }, /* @__PURE__ */ react.default.createElement(_ant_design_icons.EyeOutlined, { style: {
		cursor: "pointer",
		fontSize: 18
	} })));
};
//#endregion
exports.default = GallerySetting;
