import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Icon, InputGroup, InputRightElement, Menu, MenuButton, MenuItem, MenuList, Portal, Text, } from "@chakra-ui/react";
import { DotMore } from "@feedloop/icon";
import React from "react";
import { debounce } from "ts-debounce";
import FormulaEditor from "../FormulaEditor";
import StringPropertyEditor from "./string";
const ExpressionPropertyEditor = (props) => {
    const handleChange = React.useCallback(debounce((formula) => {
        props.onChange({ type: "formula", formula });
    }, 300), [props.onChange]);
    return typeof props.value === "string" ? (_jsxs(Menu, Object.assign({ isLazy: true, autoSelect: false }, { children: [_jsxs(InputGroup, Object.assign({ size: "sm", m: "0 !important" }, { children: [_jsx(StringPropertyEditor, { value: props.value, propDef: Object.assign(Object.assign({}, props.propDef), { type: "string", options: { format: "text" } }), propName: props.propName, onChange: props.onChange, view: props.view, onBlur: props.onBlur, placeholder: props.placeholder, autoFocus: props.autoFocus }), _jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.300", w: 10 }, { children: _jsx(Icon, { fontSize: "md", as: DotMore }) }))] })), _jsx(Portal, { children: _jsx(MenuList, Object.assign({ zIndex: 2000 }, { children: _jsx(MenuItem, Object.assign({ onClick: () => handleChange(""), icon: _jsx(Text, Object.assign({ color: "gray.500" }, { children: "\uD835\uDE27x" })) }, { children: "Add Formula" })) })) })] }))) : (_jsx(FormulaEditor, { value: props.value.formula, onChange: handleChange, type: "string", onDelete: () => props.onChange("") }));
};
export default ExpressionPropertyEditor;
//# sourceMappingURL=expression.js.map