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