import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Box, InputGroup, InputLeftElement, InputRightElement, MenuButton, Icon, Menu, MenuList, MenuItem, Input, Portal, } from "@chakra-ui/react";
import { FormulaEditorContext, FormulaEditorInput, FormulaEditorProvider, FormulaEditorSuggestions, } from "@feedloop/formula-editor";
import { useFocused, useSlateStatic, ReactEditor } from "slate-react";
import { useVariablesContext } from "@qorebase/app-runtime/src/VariablesContext";
import { DotMore } from "@feedloop/icon";
import { qoreAppsFormulaConfigs } from "@qorebase/app-runtime/src/utils/expressionParser";
const FormulaEditorEditable = (props) => {
    const { isSuggestionOpen, value, parseResult } = React.useContext(FormulaEditorContext);
    const editor = useSlateStatic();
    const isFocused = useFocused();
    const [inputFocused, setInputFocused] = React.useState(false);
    const isOpen = isFocused || isSuggestionOpen || inputFocused;
    React.useEffect(() => {
        if (isOpen && !isFocused) {
            ReactEditor.focus(editor);
        }
    }, [isOpen, editor]);
    const onFocus = React.useCallback(() => setInputFocused(true), []);
    const onBlur = React.useCallback(() => setInputFocused(false), []);
    return (_jsxs(Popover, Object.assign({ isLazy: true, trigger: "click", isOpen: isOpen, autoFocus: false, placement: "bottom-end", closeOnBlur: true }, { children: [_jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(InputGroup, Object.assign({ size: "sm" }, { children: [_jsx(InputLeftElement, Object.assign({ pointerEvents: "none", color: "gray.300", fontSize: "1.2em", w: 10 }, { children: "\uD835\uDE27x" })), _jsx(Input, { type: "text", value: value, paddingRight: props.onDelete ? 10 : undefined, errorBorderColor: "red.300", isInvalid: parseResult.errors.length > 0, isReadOnly: true, onFocus: onFocus, onBlur: onBlur, rounded: "md" }), props.onDelete && (_jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.400", w: 10 }, { children: _jsx(Icon, { fontSize: "md", as: DotMore }) })))] })) }), _jsx(MenuList, Object.assign({ zIndex: 2000 }, { children: _jsx(MenuItem, Object.assign({ onClick: props.onDelete }, { children: "Delete Formula" })) }))] })), _jsx(Portal, { children: _jsx(Box, Object.assign({ zIndex: 2000, position: "relative" }, { children: _jsx(PopoverContent, Object.assign({ w: "xl", boxShadow: "2xl" }, { children: _jsxs(PopoverBody, Object.assign({ padding: 0, width: "full", height: "full", borderRadius: 2 }, { children: [_jsx(FormulaEditorInput, { borderRadius: "none", borderWidth: 0, borderBottomWidth: 1, borderColor: "#e7e7e7" }), _jsx(Box, Object.assign({ h: "300px", display: isSuggestionOpen ? "block" : "none" }, { children: _jsx(FormulaEditorSuggestions, {}) }))] })) })) })) })] })));
};
const FormulaEditor = (props) => {
    const { variables } = useVariablesContext();
    const variablesConfig = React.useMemo(() => qoreAppsFormulaConfigs.variables.concat(variables.map((variable) => ({
        name: variable.display,
        type: "any",
    }))), [variables]);
    return (_jsx(FormulaEditorProvider, Object.assign({}, props, { functions: qoreAppsFormulaConfigs.functions, operators: qoreAppsFormulaConfigs.operators, variables: variablesConfig }, { children: _jsx(FormulaEditorEditable, { onDelete: props.onDelete }) })));
};
export default FormulaEditor;
//# sourceMappingURL=FormulaEditor.js.map