import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import useEngineContext from "../../../../hooks/useEngineContext.js";
import icon_default from "../../../icon/index.js";
import Translation from "../../../translation/index.js";
import React, { useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Input } from "antd";
import classNames from "classnames";
import "./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 = _objectWithoutProperties(props, _excluded);
	const context = useEngineContext();
	const [isEditing, setIsEditing] = useState(false);
	const editableConfig = useMemo(() => {
		if (typeof editable === "boolean") return editable ? {} : null;
		return editable || null;
	}, [editable]);
	const currentLocale = 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 locales.formatLocale(locale);
	}, []);
	const displayValue = 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 = 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.createElement("div", { className: classNames("pisell-text-editable-editing", className) }, /* @__PURE__ */ React.createElement(Translation, {
			value,
			onChange: handleInputChange,
			onPressEnter: () => setIsEditing(false),
			maxLength: editableConfig.maxLength,
			size,
			autoFocus: true
		}));
		return /* @__PURE__ */ React.createElement(Input, {
			value: displayValue,
			onChange: (e) => handleInputChange(e.target.value),
			onPressEnter: () => setIsEditing(false),
			maxLength: editableConfig.maxLength,
			size,
			autoFocus: true,
			className: classNames("pisell-text-editable-input", className),
			style: others.style
		});
	}
	return /* @__PURE__ */ React.createElement("span", _objectSpread2({ className: classNames("pisell-text-editable", className, { "pisell-text-editable-enabled": editableConfig && !editableConfig.disabled }) }, others), displayValue, editableConfig && !editableConfig.disabled && !isEditing && /* @__PURE__ */ React.createElement("span", {
		className: "pisell-text-editable-edit-icon",
		onClick: (e) => {
			e.preventDefault();
			e.stopPropagation();
			handleEdit();
		},
		title: "点击编辑"
	}, editableConfig.icon || /* @__PURE__ */ React.createElement(icon_default, {
		type: "pisell2-edit-05",
		size: 16
	})));
};
//#endregion
export { Editable as default };
