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