import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Box, Button, Icon, InputGroup, InputRightElement, Menu, MenuButton, MenuItem, MenuList, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, useDisclosure, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { DotMore } from "@feedloop/icon";
import React from "react";
import { debounce } from "ts-debounce";
import RichTextEditor, { initialValue, } from "@qorebase/app-runtime/src/components/RichtextEditor";
import VariablePropertyEditor from "./variable";
const placeholder = "Type something here";
const RichtextPropertyEditor = (props) => {
    const { isOpen, onClose, onOpen } = useDisclosure();
    const [isAddRichtext, setIsAddRichtext] = React.useState(false);
    const handleResetToString = React.useCallback(() => {
        props.onChange("");
    }, []);
    const [richtext, setRichtext] = React.useState(typeof props.value === "string" ? initialValue : props.value);
    const handleAddRichtext = React.useCallback(() => {
        debounce(() => {
            props.onChange(initialValue);
            setIsAddRichtext(true);
        }, 300)();
    }, [props.onChange]);
    const descendantFirstline = React.useMemo(() => {
        if (typeof props.value === "string")
            return "";
        const firstIndex = props.value[0];
        if ("text" in firstIndex && firstIndex.text !== "")
            return firstIndex.text;
        else if (!("text" in firstIndex) &&
            "children" in firstIndex &&
            "text" in firstIndex.children[0] &&
            firstIndex.children[0].text !== "") {
            return firstIndex.children[0].text;
        }
        else
            return placeholder;
    }, [props.value]);
    React.useEffect(() => {
        if (isAddRichtext) {
            setIsAddRichtext(false);
            onOpen();
        }
    }, [isAddRichtext]);
    const handleSave = React.useCallback(() => {
        props.onChange(richtext);
        onClose();
    }, [richtext]);
    const handleClose = React.useCallback(() => {
        setRichtext(typeof props.value === "string" ? initialValue : props.value);
        onClose();
    }, [props.value]);
    return (_jsxs(_Fragment, { children: [typeof props.value === "string" ? (_jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsxs(InputGroup, Object.assign({ border: "1px solid", borderColor: "gray.200", borderRadius: "md" }, { children: [_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.onBlur, view: props.view }) })), _jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.300", fontSize: "1.2em", w: 10 }, { children: _jsx(Icon, { as: DotMore }) }))] })), _jsx(MenuList, { children: _jsx(MenuItem, Object.assign({ onClick: handleAddRichtext }, { children: "Add Richtext" })) })] }))) : (_jsxs(Menu, { children: [_jsxs(InputGroup, Object.assign({ border: "1px solid", borderColor: "gray.200", borderRadius: "md", padding: "8px" }, { children: [_jsx(Text, Object.assign({ onClick: onOpen, cursor: "pointer", noOfLines: 1, paddingRight: "20px" }, { children: descendantFirstline })), _jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.300", fontSize: "1.2em", w: 10 }, { children: _jsx(Icon, { as: DotMore }) }))] })), _jsx(MenuList, { children: _jsx(MenuItem, Object.assign({ onClick: handleResetToString }, { children: "Delete RichText" })) })] })), _jsxs(Modal, Object.assign({ isOpen: isOpen, onClose: handleClose, isCentered: true }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, Object.assign({ maxWidth: "none", width: "800px" }, { children: [_jsx(ModalHeader, Object.assign({ fontSize: "lg" }, { children: "Rich Text" })), _jsx(ModalCloseButton, {}), _jsx(ModalBody, Object.assign({ paddingX: "8px" }, { children: _jsx(RichTextEditor, { value: richtext, onChange: (value) => {
                                        setRichtext(value);
                                    }, placeholder: placeholder }) })), _jsxs(ModalFooter, { children: [_jsx(Button, Object.assign({ mr: "12px", variant: "outline", onClick: handleClose, size: "sm" }, { children: "Cancel changes" })), _jsx(Button, Object.assign({ colorScheme: "blue", bgColor: "#0065FF", onClick: handleSave, size: "sm" }, { children: "Done" }))] })] }))] }))] }));
};
export default RichtextPropertyEditor;
//# sourceMappingURL=richtext.js.map