import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Center, HStack, Tooltip, Button, IconButton, InputGroup, InputRightElement, Box, Text, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure, } from "@chakra-ui/react";
import { Delete, Information, Lightning } from "@feedloop/icon";
import React from "react";
import { omit } from "@qorebase/app-runtime/src/utils/omit";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import ExpressionPropertyEditor from "./property/expression";
import StringPropertyEditor from "./property/string";
const ParamsEditor = React.memo(function ParamsEditor({ onClose, onSave, defaultParams = {}, }) {
    const [params, setParams] = React.useState(defaultParams);
    const handleSave = React.useCallback(() => {
        onSave(params);
        onClose();
    }, [params]);
    const handleAddparams = React.useCallback(() => {
        setParams((params) => {
            const nextKey = `params_${Object.keys(params || {}).length}`;
            const key = Object.prototype.hasOwnProperty.call(params, nextKey)
                ? `${nextKey}_1`
                : nextKey;
            return Object.assign(Object.assign({}, params), { [key]: "" });
        });
    }, []);
    const handleDeleteparams = React.useCallback((key) => {
        setParams((params) => omit([key], params));
    }, []);
    const handleKeyChange = React.useCallback((oldKey, newKey) => {
        if (oldKey !== newKey) {
            setParams((params) => (Object.assign(Object.assign({}, omit([oldKey], params)), { [newKey]: params[oldKey] })));
        }
    }, []);
    const handleValueChange = React.useCallback((key, value) => {
        setParams((params) => (Object.assign(Object.assign({}, params), { [key]: value })));
    }, []);
    const handleReset = React.useCallback(() => {
        setParams(defaultParams);
        onClose();
    }, [defaultParams]);
    return (_jsxs(Modal, Object.assign({ isOpen: true, onClose: handleReset, scrollBehavior: "inside" }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, Object.assign({ minW: "552px" }, { children: [_jsx(ModalHeader, Object.assign({ fontSize: "lg" }, { children: "Parameters Setting" })), _jsx(ModalCloseButton, {}), _jsx(ModalBody, Object.assign({ bg: "#F5F5F5" }, { children: Object.keys(params).length ? (Object.keys(params).map((key, idx) => {
                            return (_jsx(Property, { onKeyChange: handleKeyChange, onValueChange: handleValueChange, onDelete: handleDeleteparams, value: params[key], name: key }, `${idx}-${key}`));
                        })) : (_jsx(Center, Object.assign({ backgroundColor: "#F5F5F5", padding: "12px", borderWidth: "1px", borderRadius: "4px", height: "150px" }, { children: _jsxs(HStack, { children: [_jsx(Lightning, { color: "#CCCCCC", fontSize: "23px" }), _jsx(Text, Object.assign({ color: "#A2A2A2" }, { children: "Empty params" }))] }) }))) })), _jsxs(ModalFooter, Object.assign({ justifyContent: "space-between" }, { children: [_jsx(Button, Object.assign({ onClick: handleAddparams, variant: "link", my: "2", _hover: { textDecoration: "none" }, size: "sm" }, { children: "Add more parameter" })), _jsxs(Box, { children: [_jsx(Button, Object.assign({ variant: "outline", colorScheme: "gray", onClick: handleReset, size: "sm", mr: "10px" }, { children: "Cancel" })), _jsx(Button, Object.assign({ colorScheme: "blue", onClick: handleSave, size: "sm", bg: "#0065ff" }, { children: "Save setting" }))] })] }))] }))] })));
});
function Property(props) {
    return (_jsxs(Box, Object.assign({ bg: "white", display: "flex", px: "16px", py: "12px", borderRadius: "4px", alignItems: "flex-end" }, { children: [_jsxs(Box, Object.assign({ w: "50%", mr: "8px" }, { children: [_jsx(Text, Object.assign({ pr: "10px", mb: "8px" }, { children: "Name" })), _jsxs(InputGroup, { children: [_jsx(StringPropertyEditor, { onChange: () => { }, onBlur: (value) => props.onKeyChange(props.name, value), propDef: {
                                    type: "string",
                                    options: { format: "text" },
                                }, propName: "params", value: props.name }), _jsx(Tooltip, Object.assign({ label: _jsxs(Text, Object.assign({ color: "white" }, { children: ["Give your params a name. You can call the value in the following javascript editor ", _jsx("strong", { children: "_context.params.payloadName" })] })) }, { children: _jsx(InputRightElement, { children: _jsx(Information, {}) }) }))] })] })), _jsxs(Box, Object.assign({ w: "50%", mr: "8px" }, { children: [_jsx(Text, Object.assign({ pr: "10px", mb: "8px" }, { children: "Default value" })), _jsx(InputGroup, { children: _jsx(ExpressionPropertyEditor, { onChange: () => { }, onBlur: (value) => props.onValueChange(props.name, value), propDef: {
                                type: "expression",
                                options: {},
                            }, propName: "Value", value: props.value }) })] })), _jsx(Box, { children: _jsx(IconButton, { "aria-label": "delete params", onClick: () => props.onDelete(props.name), variant: "outline", size: "sm", icon: _jsx(Delete, { width: "18px", height: "20px" }) }) })] })));
}
export const ParamsEditorButton = (props) => {
    const { page } = props;
    const runtimeActions = RuntimeContext.useActions();
    const { onOpen, isOpen, onClose } = useDisclosure();
    const onSave = React.useCallback((params) => runtimeActions.updatePage({ page: page.id }, (page) => {
        page.params = params;
    }), [page.id, runtimeActions]);
    const defaultParams = React.useMemo(() => page.params || {}, [page.params]);
    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ colorScheme: "gray", variant: "outline", onClick: onOpen, size: "sm" }, { children: "Page Parameters" })), isOpen && (_jsx(ParamsEditor, { onSave: onSave, onClose: onClose, defaultParams: defaultParams }))] }));
};
//# sourceMappingURL=ParamsEditor.js.map