import { jsx, jsxs } from "react/jsx-runtime";
import { Input } from "antd";
import lodash from "lodash";
import { Icon, useTranslation } from "../../../index.mjs";
import { MenuAdd } from "./MenuAdd.mjs";
import { useStyles } from "./MenuSearchAdd.style.mjs";
const MenuSearchAdd = (props)=>{
    const { designable, dn, setSearchMenuTitle } = props;
    const { t } = useTranslation();
    const { styles } = useStyles();
    const handleChange = lodash.debounce((event)=>{
        event.stopPropagation();
        const searchValue = event.target.value.trim();
        setSearchMenuTitle(searchValue);
    }, 500);
    const handleSearch = (value, event)=>{
        event.stopPropagation();
        lodash.debounce(setSearchMenuTitle, 500)(value.trim());
    };
    return /*#__PURE__*/ jsxs("div", {
        className: styles.menuSearchAdd,
        children: [
            /*#__PURE__*/ jsx(Input.Search, {
                allowClear: true,
                placeholder: t('search Menu'),
                prefix: /*#__PURE__*/ jsx(Icon, {
                    type: "SearchOutlined"
                }),
                onChange: handleChange,
                onSearch: handleSearch
            }),
            /*#__PURE__*/ jsx("div", {
                className: "menu-add-wrapper",
                children: designable && /*#__PURE__*/ jsx(MenuAdd, {
                    dn: dn
                })
            })
        ]
    });
};
export { MenuSearchAdd };
