import React, { useEffect, useMemo, useRef, useState } from "react";
import { isBoolean } from "@pisell/utils";
import { Input } from "@pisell/materials";
import classNames from "classnames";
import Edit05 from "@pisell/icon/es/Edit05";
import "./index.less";
//#region src/components/workSpaceList/components/EditableString/index.tsx
/**
* 可编辑string
* @param props
* @constructor
*/
const EditableString = (props) => {
	const { text, style, onChange, editable, editing: editingProps, maxLength, className, ellipsis } = props;
	const [editing, setEditing] = useState(false);
	const [originText, setOriginText] = useState(text);
	const [temporaryValue, setTemporaryValue] = useState(text);
	const inputRef = useRef(null);
	const textRef = useRef(null);
	useEffect(() => {
		setOriginText(text);
		setTemporaryValue(text);
	}, [text]);
	useEffect(() => {
		isBoolean(editingProps) && setEditing(editingProps);
	}, [editingProps]);
	useEffect(() => {
		if (editing) setTimeout(() => {
			var _inputRef$current;
			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
		});
	}, [editing]);
	useEffect(() => {
		if (textRef.current) textRef.current.style.webkitLineClamp = ellipsis === null || ellipsis === void 0 ? void 0 : ellipsis.row;
	}, [ellipsis, editing]);
	const handleChangeText = () => {
		if (!temporaryValue) return;
		onChange === null || onChange === void 0 || onChange(temporaryValue);
		setEditing(false);
	};
	const handleEdit = () => {
		setEditing(true);
	};
	return useMemo(() => {
		if (editing) return /* @__PURE__ */ React.createElement("span", { style }, /* @__PURE__ */ React.createElement(Input, {
			ref: inputRef,
			value: temporaryValue,
			onChange: (e) => setTemporaryValue(e.target.value),
			onPressEnter: handleChangeText,
			onBlur: handleChangeText,
			maxLength
		}));
		return /* @__PURE__ */ React.createElement("div", {
			style,
			size: 16,
			className: classNames(className, "edit-wrap")
		}, /* @__PURE__ */ React.createElement("span", {
			className: "text",
			ref: textRef
		}, temporaryValue), editable && temporaryValue && /* @__PURE__ */ React.createElement(Edit05, {
			className: "edit-icon",
			onClick: handleEdit
		}));
	}, [
		editing,
		temporaryValue,
		ellipsis
	]);
};
//#endregion
export { EditableString as default };
