import { getText } from "../../../../locales/index.js";
import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useCallback, useState } from "react";
import { Input, Popover, Space } from "antd";
import { GlobalOutlined } from "@ant-design/icons";
import "./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: 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] = useState(false);
	const InputComponent = useCallback(() => {
		switch (type) {
			case "textarea": return Input.TextArea;
			default: return Input;
		}
	}, [type])();
	const hasAnyTranslation = useCallback(() => {
		if (!value) return false;
		return Object.entries(value).some(([key, val]) => key !== "original" && val);
	}, [value]);
	const handleInputChange = useCallback((lang) => (e) => {
		const newValue = _objectSpread2(_objectSpread2({}, value), {}, { [lang]: e.target.value });
		onChange === null || onChange === void 0 || onChange(newValue);
	}, [value, onChange]);
	const content = /* @__PURE__ */ React.createElement("div", { className: "translation-popover" }, /* @__PURE__ */ React.createElement(Space, {
		direction: "vertical",
		style: { width: "100%" },
		size: 16
	}, languageConfig.map(({ key, label }) => /* @__PURE__ */ React.createElement("div", {
		key,
		className: "translation-field"
	}, /* @__PURE__ */ React.createElement("div", { className: "translation-label" }, label), /* @__PURE__ */ React.createElement(InputComponent, {
		value: (value === null || value === void 0 ? void 0 : value[key]) || "",
		onChange: handleInputChange(key),
		allowClear: true,
		maxLength,
		style: inputStyle || {}
	})))));
	return /* @__PURE__ */ React.createElement("div", { className: "translation-wrapper" }, /* @__PURE__ */ React.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.createElement(Popover, {
		content,
		trigger: "click",
		open,
		onOpenChange: (open) => {
			if (disabled) return;
			setOpen(open);
		},
		placement: "bottom"
	}, /* @__PURE__ */ React.createElement("div", { className: `translation-icon-wrapper ${hasAnyTranslation() ? "has-translation" : ""} ${disabled ? "disabled" : ""}` }, /* @__PURE__ */ React.createElement(GlobalOutlined, { className: "translation-icon" }))));
};
//#endregion
export { Translation as default };
