import { iconMap, icons } from "./constants.js";
import { useState } from "react";
import { Space } from "antd";
import { Input as Input$1 } from "@pisell/materials";
import SearchLg from "@pisell/icon/es/SearchLg";
import classNames from "classnames";
import { useControllableValue } from "ahooks";
import "./IconPanel.less";
//#region src/components/workSpaceList/components/AppearanceEdit/IconPanel.tsx
const IconPanel = (props) => {
	const { color, name, value } = props;
	const [state, setState] = useControllableValue(props);
	const [showIcons, setShowIcons] = useState(icons);
	const onSearch = (val) => {
		setShowIcons(icons.filter((item) => item.name.includes(val)));
	};
	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Input$1, {
		bordered: false,
		prefix: /* @__PURE__ */ React.createElement(SearchLg, { 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(Space, {
		size: 20,
		wrap: true
	}, /* @__PURE__ */ React.createElement("div", {
		className: classNames("icon-item-wrap", "icon-item-text", { ["icon-item-wrap-active"]: !iconMap[value] }),
		style: !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: classNames("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
export { IconPanel as default };
