import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Icon, Input, InputGroup, InputRightElement, Menu, MenuButton, MenuItem, MenuList, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { DotMore } from "@feedloop/icon";
import React from "react";
import VariablePropertyEditor from "./variable";
const NumberPropertyEditor = (props) => {
    const handleChange = React.useCallback((e) => {
        props.onChange(parseInt(e.currentTarget.value));
    }, [props.onChange]);
    const handleBlur = React.useCallback((e) => {
        if (!props.onBlur)
            return;
        props.onBlur(parseInt(e.currentTarget.value));
    }, [props.onBlur]);
    if (props.propDef.options.useVariable) {
        return typeof props.value === "string" ? (_jsx(MenuInput, { input: _jsx(Box, Object.assign({ paddingRight: "1.2em", css: css `
              & select,
              & div {
                border: none;
              }
            ` }, { children: _jsx(VariablePropertyEditor, { value: props.value, onChange: props.onChange, propDef: Object.assign(Object.assign({}, props.propDef), { type: "variable", options: {} }), propName: props.propName, onBlur: props.onChange, view: props.view }) })), menuItems: [
                {
                    label: "Delete Variable",
                    onClick: () => {
                        props.onChange(props.propDef.options.nullable ? undefined : 0);
                    },
                },
            ] })) : (_jsx(MenuInput, { input: _jsx(Input, { type: "number", value: props.value, onChange: handleChange, onBlur: handleBlur, size: "sm" }), menuItems: [
                {
                    label: "Add Variable",
                    onClick: () => {
                        props.onChange("");
                    },
                },
            ] }));
    }
    return (_jsx(Input, { type: "number", defaultValue: props.value, onChange: handleChange, onBlur: handleBlur, size: "sm" }));
};
export default NumberPropertyEditor;
function MenuInput(props) {
    return (_jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsxs(InputGroup, Object.assign({ border: "1px solid", borderColor: "gray.200", borderRadius: "md" }, { children: [props.input, _jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.300", fontSize: "1.2em", w: 10 }, { children: _jsx(Icon, { as: DotMore }) }))] })), _jsx(MenuList, { children: props.menuItems.map((menuItem) => (_jsx(MenuItem, Object.assign({ onClick: menuItem.onClick }, { children: menuItem.label }), menuItem.label))) })] })));
}
//# sourceMappingURL=number.js.map