import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useFormLayout } from "@tachybase/components";
import { connect, isValid, mapProps, mapReadPretty } from "@tachybase/schema";
import { CloseOutlined, LoadingOutlined } from "@ant-design/icons";
import { Button, Space } from "antd";
import { useTranslation } from "react-i18next";
import { Icon, hasIcon } from "../../../icon/index.mjs";
import { StablePopover } from "../popover/index.mjs";
import { IconFilterInput } from "./IconFilterInput.mjs";
import { IconFilterList } from "./IconList.mjs";
function IconField(props) {
    const { value, onChange, disabled } = props;
    const { t } = useTranslation();
    const layout = useFormLayout();
    const [visible, setVisible] = useState(false);
    const [filterKey, setFilterKey] = useState('');
    return /*#__PURE__*/ jsx("div", {
        children: /*#__PURE__*/ jsxs(Space.Compact, {
            children: [
                /*#__PURE__*/ jsx(StablePopover, {
                    placement: 'bottom',
                    open: visible,
                    onOpenChange: (val)=>{
                        if (disabled) return;
                        setVisible(val);
                    },
                    content: /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(IconFilterInput, {
                                changeFilterKey: setFilterKey
                            }),
                            /*#__PURE__*/ jsx(IconFilterList, {
                                currentKey: value,
                                filterKey: filterKey,
                                onChange: onChange,
                                changePop: setVisible
                            })
                        ]
                    }),
                    title: t('Icon'),
                    trigger: "click",
                    children: /*#__PURE__*/ jsx(Button, {
                        size: layout.size,
                        disabled: disabled,
                        children: hasIcon(value) ? /*#__PURE__*/ jsx(Icon, {
                            type: value
                        }) : t('Select icon')
                    })
                }),
                value && !disabled && /*#__PURE__*/ jsx(Button, {
                    size: layout.size,
                    icon: /*#__PURE__*/ jsx(CloseOutlined, {}),
                    onClick: (e)=>{
                        onChange(null);
                    }
                })
            ]
        })
    });
}
const IconPicker_IconPicker = connect(IconField, mapProps((props, field)=>({
        ...props,
        suffix: /*#__PURE__*/ jsx("span", {
            children: (null == field ? void 0 : field['loading']) || (null == field ? void 0 : field['validating']) ? /*#__PURE__*/ jsx(LoadingOutlined, {}) : props.suffix
        })
    })), mapReadPretty((props)=>{
    if (!isValid(props.value)) return /*#__PURE__*/ jsx("div", {});
    return /*#__PURE__*/ jsx(Icon, {
        type: props.value
    });
}));
const IconPicker = IconPicker_IconPicker;
export { IconPicker_IconPicker as IconPicker, IconPicker as default };
