const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_useEngineContext = require("../../../../hooks/useEngineContext.js");
const require_index = require("../../../icon/index.js");
const require_index$1 = require("../../../translation/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./index.less");
//#region src/components/pisellText/components/Editable/index.tsx
const _excluded = [
	"value",
	"children",
	"editable",
	"onChange",
	"className",
	"size"
];
const Editable = (props) => {
	const { value, children, editable = false, onChange, className, size = "middle" } = props, others = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const context = require_useEngineContext.default();
	const [isEditing, setIsEditing] = (0, react.useState)(false);
	const editableConfig = (0, react.useMemo)(() => {
		if (typeof editable === "boolean") return editable ? {} : null;
		return editable || null;
	}, [editable]);
	const currentLocale = (0, react.useMemo)(() => {
		var _context$appHelper$ut;
		const locale = (_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale");
		return _pisell_utils.locales.formatLocale(locale);
	}, []);
	const displayValue = (0, react.useMemo)(() => {
		if (typeof children === "string") return children;
		if (typeof value === "string") return value;
		if (value && typeof value === "object") return value[currentLocale] || "";
		return "";
	}, [
		value,
		currentLocale,
		children
	]);
	const isMultiLanguage = (0, react.useMemo)(() => {
		return !!value && typeof value === "object";
	}, [value]);
	const handleEdit = () => {
		if (editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.disabled) return;
		setIsEditing(true);
	};
	const handleInputChange = (newValue) => {
		if (!onChange) return;
		onChange(newValue);
	};
	if (isEditing && editableConfig) {
		if (isMultiLanguage) return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("pisell-text-editable-editing", className) }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
			value,
			onChange: handleInputChange,
			onPressEnter: () => setIsEditing(false),
			maxLength: editableConfig.maxLength,
			size,
			autoFocus: true
		}));
		return /* @__PURE__ */ react.default.createElement(antd.Input, {
			value: displayValue,
			onChange: (e) => handleInputChange(e.target.value),
			onPressEnter: () => setIsEditing(false),
			maxLength: editableConfig.maxLength,
			size,
			autoFocus: true,
			className: (0, classnames.default)("pisell-text-editable-input", className),
			style: others.style
		});
	}
	return /* @__PURE__ */ react.default.createElement("span", require_objectSpread2._objectSpread2({ className: (0, classnames.default)("pisell-text-editable", className, { "pisell-text-editable-enabled": editableConfig && !editableConfig.disabled }) }, others), displayValue, editableConfig && !editableConfig.disabled && !isEditing && /* @__PURE__ */ react.default.createElement("span", {
		className: "pisell-text-editable-edit-icon",
		onClick: (e) => {
			e.preventDefault();
			e.stopPropagation();
			handleEdit();
		},
		title: "点击编辑"
	}, editableConfig.icon || /* @__PURE__ */ react.default.createElement(require_index.default, {
		type: "pisell2-edit-05",
		size: 16
	})));
};
//#endregion
exports.default = Editable;
