import { getText } from "../../../../../locales/index.js";
import useSharedState from "../../../../../hooks/useSharedState.js";
import { Context } from "../../../model.js";
import PopoverContent from "../ColumnsSetting/PopoverContent.js";
import ButtonIcon from "../ButtonIcon/index.js";
import React, { useMemo } from "react";
import { Divider, Form, Popover, Segmented, Select, Space } from "antd";
import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
import "./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.createElement(React.Fragment, null, value ? /* @__PURE__ */ React.createElement(EyeOutlined, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(false) }) : /* @__PURE__ */ React.createElement(EyeInvisibleOutlined, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(true) }));
};
const GallerySetting = (props) => {
	const { setting } = props;
	const { state } = useSharedState(Context);
	const { defaultColumns } = state;
	const { cover } = setting;
	const { fields, show } = cover;
	const form = Form.useFormInstance();
	const column_setting = Form.useWatch("column_setting", {
		form,
		preserve: true
	}) || [];
	const isActive = useMemo(() => {
		return column_setting.some((item) => !item.isShow);
	}, [column_setting]);
	const coverFieldOptions = useMemo(() => {
		return [{
			value: "noCover",
			label: 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 = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `${prefix}gallery-setting-header` }, /* @__PURE__ */ React.createElement(Space, {
			direction: "vertical",
			style: { width: "100%" }
		}, show && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ React.createElement("div", null, getText("table-action-gallery-cover-content")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Form.Item, {
			name: ["gallery_setting", "coverField"],
			noStyle: true
		}, /* @__PURE__ */ React.createElement(Select, {
			options: coverFieldOptions,
			style: { width: 120 }
		})))), /* @__PURE__ */ React.createElement(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.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ React.createElement("div", null, getText("table-action-gallery-cover-effect")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Form.Item, {
			name: ["gallery_setting", "coverObjectFit"],
			noStyle: true
		}, /* @__PURE__ */ React.createElement(Segmented, { options: [{
			label: getText("table-action-gallery-cover-fit-fill"),
			value: "fill"
		}, {
			label: getText("table-action-gallery-cover-fit-cover"),
			value: "cover"
		}] })))) : null), /* @__PURE__ */ React.createElement(Divider, { style: { margin: "0" } })), /* @__PURE__ */ React.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ React.createElement("div", null, getText("table-action-gallery-display-mode")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Form.Item, {
			name: ["gallery_setting", "compactMode"],
			noStyle: true
		}, /* @__PURE__ */ React.createElement(Segmented, { options: [{
			label: getText("table-action-gallery-display-mode-default"),
			value: "default"
		}, {
			label: getText("table-action-gallery-display-mode-compact"),
			value: "compact"
		}] })))), /* @__PURE__ */ React.createElement(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.createElement("div", { className: `${prefix}gallery-setting-header-item` }, /* @__PURE__ */ React.createElement("div", null, getText("table-action-gallery-display-field-name")), /* @__PURE__ */ React.createElement("div", { className: `${prefix}gallery-setting-header-item-icon-wrap` }, /* @__PURE__ */ React.createElement(Form.Item, {
			name: ["gallery_setting", "isShowLabel"],
			noStyle: true
		}, /* @__PURE__ */ React.createElement(LabelShow, null)))) : null)), /* @__PURE__ */ React.createElement(Divider, { style: { margin: "8px 0 0" } }));
	}, [coverFieldOptions]);
	const content = useMemo(() => {
		return /* @__PURE__ */ React.createElement(Form.Item, {
			name: ["column_setting"],
			noStyle: true
		}, /* @__PURE__ */ React.createElement(PopoverContent, {
			isShowTitle: false,
			headerContent
		}));
	}, [headerContent]);
	return /* @__PURE__ */ React.createElement(Popover, {
		content,
		arrow: false,
		placement: "bottomRight",
		trigger: "click"
	}, /* @__PURE__ */ React.createElement(ButtonIcon, { isActive }, /* @__PURE__ */ React.createElement(EyeOutlined, { style: {
		cursor: "pointer",
		fontSize: 18
	} })));
};
//#endregion
export { GallerySetting as default };
