import Color from "./Color.js";
import IconPanel from "./IconPanel.js";
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { Divider } from "antd";
import { Input as Input$1 } from "@pisell/materials";
import "./index.less";
//#region src/components/workSpaceList/components/AppearanceEdit/index.tsx
const AppearanceEdit = (props, ref) => {
	const { colorTitle, isShowName = true, name: propsName, color: propsColor, icon: propsIcon, style } = props;
	const inputRef = useRef(null);
	const [name, setName] = useState("Untitled Base");
	const [color, setColor] = useState("#7F56D9");
	const [icon, setIcon] = useState("");
	useEffect(() => {
		propsName && setName(propsName);
		propsColor && setColor(propsColor);
		propsIcon && setIcon(propsIcon);
	}, [
		propsName,
		propsColor,
		propsIcon
	]);
	useEffect(() => {
		var _inputRef$current;
		inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus({ cursor: "all" });
	}, []);
	useImperativeHandle(ref, () => ({ getDetail: () => {
		return {
			name,
			color,
			icon
		};
	} }));
	return /* @__PURE__ */ React.createElement("div", {
		className: "appearance-edit-wrap",
		style
	}, isShowName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Input$1, {
		value: name,
		onChange: (e) => setName(e.target.value),
		ref: inputRef
	}), /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement("div", null, colorTitle && /* @__PURE__ */ React.createElement("div", { className: "color-title" }, colorTitle), /* @__PURE__ */ React.createElement(Color, {
		value: color,
		onChange: setColor
	})), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconPanel, {
		value: icon,
		onChange: setIcon,
		color,
		name
	})));
};
var AppearanceEdit_default = forwardRef(AppearanceEdit);
//#endregion
export { AppearanceEdit_default as default };
