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, } from "@chakra-ui/react";
import { Delete, Information, Lightning } from "@feedloop/icon";
import produce from "immer";
import React from "react";
import StringPropertyEditor from "./property/string";
export default function PayloadEditor({ onClose, onSave, defaultPayload, }) {
    const [payload, setPayload] = React.useState(defaultPayload);
    const handleSave = React.useCallback(() => {
        onSave(payload);
        onClose();
    }, [payload]);
    const handleAddPayload = React.useCallback(() => {
        setPayload((payload) => produce(payload, (draft) => {
            draft[Object.prototype.hasOwnProperty.call(draft, `payload_${Object.keys(draft).length}`)
                ? `payload_${Object.keys(draft).length}_1`
                : `payload_${Object.keys(draft).length}`] = "";
        }));
    }, []);
    const handleDeletePayload = React.useCallback((key) => {
        setPayload((payload) => 
        /* eslint-disable fp/no-delete -- immer */
        produce(payload, (draft) => {
            delete draft[key];
        })
        /* eslint-enable fp/no-delete */
        );
    }, []);
    const handleKeyChange = React.useCallback((oldKey, newKey) => {
        if (oldKey !== newKey) {
            setPayload((payload) => 
            /* eslint-disable fp/no-delete -- immer */
            produce(payload, (draft) => {
                draft[newKey] = draft[oldKey];
                delete draft[oldKey];
            })
            /* eslint-enable fp/no-delete */
            );
        }
    }, []);
    const handleValueChange = React.useCallback((key, value) => {
        setPayload((payload) => produce(payload, (draft) => {
            draft[key] = value;
        }));
    }, []);
    const handleReset = React.useCallback(() => {
        setPayload(defaultPayload);
        onClose();
    }, [defaultPayload]);
    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: "Setting payload" })), _jsx(ModalCloseButton, {}), _jsx(ModalBody, Object.assign({ bg: "#F5F5F5" }, { children: Object.keys(payload).length ? (Object.keys(payload).map((key, idx) => {
                            return (_jsx(Property, { onKeyChange: handleKeyChange, onValueChange: handleValueChange, onDelete: handleDeletePayload, value: payload[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 Payload" }))] }) }))) })), _jsxs(ModalFooter, Object.assign({ justifyContent: "space-between" }, { children: [_jsx(Button, Object.assign({ onClick: handleAddPayload, variant: "link", my: "2", size: "sm" }, { children: "Add more payload" })), _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: "Payload", value: props.name }), _jsx(Tooltip, Object.assign({ label: _jsxs(Text, Object.assign({ color: "white" }, { children: ["Give your payload a name. You can call the value in the following javascript editor", " ", _jsx("strong", { children: "_context.payload.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" })), _jsxs(InputGroup, { children: [_jsx(StringPropertyEditor, { onChange: () => { }, onBlur: (value) => props.onValueChange(props.name, value), propDef: {
                                    type: "string",
                                    options: { format: "text" },
                                }, propName: "Value", value: props.value }), _jsx(Tooltip, Object.assign({ label: _jsx(_Fragment, { children: _jsxs(Text, Object.assign({ color: "white" }, { children: ["Specify default value with static value:", _jsx("br", {}), _jsx("strong", { children: `data string"value"` }), _jsx("br", {}), _jsx("strong", { children: "or" }), _jsx("br", {}), "dynamic value:", _jsx("br", {}), "call data from Qore table column with following format", " ", _jsx("strong", { children: `"@ColumnName"` })] })) }) }, { children: _jsx(InputRightElement, { children: _jsx(Information, {}) }) }))] })] })), _jsx(Box, { children: _jsx(IconButton, { "aria-label": "delete payload", onClick: () => props.onDelete(props.name), variant: "outline", size: "sm", icon: _jsx(Delete, { width: "18px", height: "20px" }) }) })] })));
}
//# sourceMappingURL=PayloadEditor.js.map