const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../locales/index.js");
const require_objectWithoutProperties = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_utils = require("./utils.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let _ant_design_icons = require("@ant-design/icons");
let ahooks = require("ahooks");
require("./index.less");
//#region src/components/iconSelect/index.tsx
const _excluded = ["type", "icons"];
const IconGroupNameMap = {
	outlined: require_index.getText("pisell-icon-select-outlined"),
	filled: require_index.getText("pisell-icon-select-filled"),
	"two-tone": require_index.getText("pisell-icon-select-two-tone"),
	iconfont: require_index.getText("pisell-icon-select-iconfont")
};
const Icon = (props) => {
	const { type, icons = {} } = props, rest = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const Comp = icons[type];
	if (!Comp) return null;
	return /* @__PURE__ */ react.default.createElement(Comp, rest);
};
const IconContent = ({ selectedGroup, groups, setSelectedGroup, search, setSearch, list, handleChange, icons }) => /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-icon-select-popup" }, /* @__PURE__ */ react.default.createElement(antd.Radio.Group, {
	className: "pisell-lowcode-icon-select-radio-group",
	size: "middle",
	value: selectedGroup,
	onChange: (e) => setSelectedGroup(e.target.value)
}, groups.map((item) => /* @__PURE__ */ react.default.createElement(antd.Radio.Button, {
	key: item.group,
	value: item.group
}, IconGroupNameMap[item.group]))), /* @__PURE__ */ react.default.createElement(antd.Input, {
	value: search,
	size: "middle",
	placeholder: require_index.getText("pisell-icon-select-search"),
	allowClear: true,
	prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, null),
	onChange: (e) => setSearch(e.target.value),
	style: { width: "100%" },
	className: "pisell-lowcode-icon-select-search"
}), /* @__PURE__ */ react.default.createElement("ul", { className: "pisell-lowcode-icon-select-content" }, list.map((item) => /* @__PURE__ */ react.default.createElement("li", {
	className: "pisell-lowcode-icon-select-item",
	key: item.name,
	onClick: () => handleChange(item.name),
	title: item.name
}, /* @__PURE__ */ react.default.createElement(Icon, {
	type: item.name,
	icons
})))));
const IconSelect = (props) => {
	const { disabled, defaultValue } = props;
	const [open, setOpen] = (0, react.useState)(false);
	const [search, setSearch] = (0, react.useState)("");
	const [icons, setIcons] = (0, react.useState)({});
	const [groups, setGroups] = (0, react.useState)([]);
	const [selectedGroup, setSelectedGroup] = (0, react.useState)("outlined");
	const [firstLoad, setFirstLoad] = (0, react.useState)(true);
	const [list, setList] = (0, react.useState)([]);
	const [value, onChange] = (0, ahooks.useControllableValue)(props, { defaultValue });
	if (firstLoad && defaultValue && (0, _pisell_utils.isUndefined)(value)) {
		onChange(defaultValue);
		setFirstLoad(false);
	}
	(0, react.useEffect)(() => {
		var _groups$;
		const iconList = require_utils.getIconList();
		const groups = [];
		const icons = {};
		iconList.forEach((item) => {
			const { group, name, icon } = item;
			if (groups.every((item) => item.group !== group)) groups.push({
				group,
				list: []
			});
			groups.find((item) => item.group === group).list.push(item);
			icons[item.name] = item === null || item === void 0 ? void 0 : item.icon;
		});
		setIcons(icons);
		setGroups(groups);
		setSelectedGroup((_groups$ = groups[0]) === null || _groups$ === void 0 ? void 0 : _groups$.group);
	}, []);
	(0, react.useEffect)(() => {
		var _currentGroup$list;
		const currentGroup = groups.find((item) => item.group === selectedGroup);
		setList(((_currentGroup$list = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.list) !== null && _currentGroup$list !== void 0 ? _currentGroup$list : []).filter((item) => {
			return search ? item.name.toLowerCase().indexOf(search.toLowerCase()) > -1 : true;
		}));
	}, [
		selectedGroup,
		search,
		groups
	]);
	const handleChange = (icon) => {
		onChange === null || onChange === void 0 || onChange(icon);
		hide();
	};
	const triggerNode = /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-icon-select-trigger" }, /* @__PURE__ */ react.default.createElement(Icon, {
		type: value,
		icons,
		style: { fontSize: 24 }
	}));
	const hide = () => {
		setOpen(false);
	};
	const handleOpenChange = (newOpen) => {
		setOpen(newOpen);
	};
	return /* @__PURE__ */ react.default.createElement(antd.Space.Compact, {
		block: true,
		className: "pisell-lowcode-icon-select"
	}, /* @__PURE__ */ react.default.createElement(antd.Popover, {
		content: /* @__PURE__ */ react.default.createElement(IconContent, {
			selectedGroup,
			groups,
			setSelectedGroup,
			search,
			setSearch,
			list,
			handleChange,
			icons
		}),
		trigger: "click",
		placement: "bottom",
		open,
		onOpenChange: handleOpenChange
	}, value ? /* @__PURE__ */ react.default.createElement(antd.Button, {
		size: "large",
		disabled,
		icon: triggerNode,
		className: "pisell-lowcode-icon-select-button"
	}) : /* @__PURE__ */ react.default.createElement(antd.Button, {
		className: "pisell-lowcode-icon-select-button-text",
		size: "large"
	}, require_index.getText("pisell-icon-select-select"))), value && !disabled && /* @__PURE__ */ react.default.createElement(antd.Button, {
		size: "large",
		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.CloseOutlined, null),
		className: "pisell-lowcode-icon-select-button",
		onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange("")
	}));
};
//#endregion
exports.default = IconSelect;
