const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_constants = require("./constants.js");
let react = require("react");
let antd = require("antd");
let _pisell_materials = require("@pisell/materials");
let _pisell_icon_es_SearchLg = require("@pisell/icon/es/SearchLg");
_pisell_icon_es_SearchLg = require_runtime.__toESM(_pisell_icon_es_SearchLg);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let ahooks = require("ahooks");
require("./IconPanel.less");
//#region src/components/workSpaceList/components/AppearanceEdit/IconPanel.tsx
const IconPanel = (props) => {
	const { color, name, value } = props;
	const [state, setState] = (0, ahooks.useControllableValue)(props);
	const [showIcons, setShowIcons] = (0, react.useState)(require_constants.icons);
	const onSearch = (val) => {
		setShowIcons(require_constants.icons.filter((item) => item.name.includes(val)));
	};
	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(_pisell_materials.Input, {
		bordered: false,
		prefix: /* @__PURE__ */ React.createElement(_pisell_icon_es_SearchLg.default, { className: "search-icon" }),
		placeholder: "Search icons",
		className: "search",
		onPressEnter: (e) => {
			var _e$target;
			return onSearch === null || onSearch === void 0 ? void 0 : onSearch((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
		}
	}), /* @__PURE__ */ React.createElement(antd.Space, {
		size: 20,
		wrap: true
	}, /* @__PURE__ */ React.createElement("div", {
		className: (0, classnames.default)("icon-item-wrap", "icon-item-text", { ["icon-item-wrap-active"]: !require_constants.iconMap[value] }),
		style: !require_constants.iconMap[value] ? { background: color } : {},
		onClick: () => setState("")
	}, name.slice(0, 2)), showIcons.map((item) => {
		const isActive = state === item.name;
		const Icon = item.icon;
		return /* @__PURE__ */ React.createElement("div", {
			className: (0, classnames.default)("icon-item-wrap", { ["icon-item-wrap-active"]: isActive }),
			style: isActive ? { background: color } : {},
			onClick: () => setState(item.name),
			key: item.name
		}, /* @__PURE__ */ React.createElement(Icon, { style: { fontSize: 20 } }));
	})));
};
//#endregion
exports.default = IconPanel;
