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");
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/dataSourceComponents/fields/Translation/BaseTranslation.tsx
const defaultValue = {
	en: "",
	"zh-CN": "",
	"zh-HK": "",
	"ja": "",
	"pt": "",
	original: ""
};
const languageConfig = [
	{
		key: "original",
		label: require_index.getText("pisell-translation-original")
	},
	{
		key: "en",
		label: "English"
	},
	{
		key: "zh-CN",
		label: "简体中文"
	},
	{
		key: "zh-HK",
		label: "繁體中文"
	},
	{
		key: "ja",
		label: "日本語"
	},
	{
		key: "pt",
		label: "Português"
	}
];
const Translation = ({ value = defaultValue, onChange, placeholder, disabled, type = "text", maxLength, inputStyle }) => {
	const [open, setOpen] = (0, react.useState)(false);
	const InputComponent = (0, react.useCallback)(() => {
		switch (type) {
			case "textarea": return antd.Input.TextArea;
			default: return antd.Input;
		}
	}, [type])();
	const hasAnyTranslation = (0, react.useCallback)(() => {
		if (!value) return false;
		return Object.entries(value).some(([key, val]) => key !== "original" && val);
	}, [value]);
	const handleInputChange = (0, react.useCallback)((lang) => (e) => {
		const newValue = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, value), {}, { [lang]: e.target.value });
		onChange === null || onChange === void 0 || onChange(newValue);
	}, [value, onChange]);
	const content = /* @__PURE__ */ react.default.createElement("div", { className: "translation-popover" }, /* @__PURE__ */ react.default.createElement(antd.Space, {
		direction: "vertical",
		style: { width: "100%" },
		size: 16
	}, languageConfig.map(({ key, label }) => /* @__PURE__ */ react.default.createElement("div", {
		key,
		className: "translation-field"
	}, /* @__PURE__ */ react.default.createElement("div", { className: "translation-label" }, label), /* @__PURE__ */ react.default.createElement(InputComponent, {
		value: (value === null || value === void 0 ? void 0 : value[key]) || "",
		onChange: handleInputChange(key),
		allowClear: true,
		maxLength,
		style: inputStyle || {}
	})))));
	return /* @__PURE__ */ react.default.createElement("div", { className: "translation-wrapper" }, /* @__PURE__ */ react.default.createElement(InputComponent, {
		value: (value === null || value === void 0 ? void 0 : value.original) || "",
		onChange: handleInputChange("original"),
		placeholder,
		disabled,
		className: "translation-input",
		maxLength,
		style: inputStyle || {}
	}), /* @__PURE__ */ react.default.createElement(antd.Popover, {
		content,
		trigger: "click",
		open,
		onOpenChange: (open) => {
			if (disabled) return;
			setOpen(open);
		},
		placement: "bottom"
	}, /* @__PURE__ */ react.default.createElement("div", { className: `translation-icon-wrapper ${hasAnyTranslation() ? "has-translation" : ""} ${disabled ? "disabled" : ""}` }, /* @__PURE__ */ react.default.createElement(_ant_design_icons.GlobalOutlined, { className: "translation-icon" }))));
};
//#endregion
exports.default = Translation;
