import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Divider, Flex, HStack, Text } from "@chakra-ui/react";
import { AlignCenterToolbar, AlignJustifyToolbar, AlignLeftToolbar, AlignRightToolbar, BlockQuoteToolbar, BoldToolbar, CodeToolbar, ColorTextToolbar, HeadingToolbar, HighlightColorToolbar, ItalicToolbar, OrderedListToolbar, Qlate, QlateEditor, StrikethroughToolbar, UnderlineToolbar, UnorderedListToolbar, } from "@feedloop/uikit";
import { css } from "@emotion/react";
import { plugins } from "../components/RichtextEditor";
import { registerComponent } from "../interfaces";
import InputComponentLabel from "../components/InputComponentLabel";
const RichTextInput = registerComponent("Rich Text Input", {
    type: "none",
    icon: "RichTextInput",
    group: "input",
    display: "block",
    defaultProps: {
        label: "Rich Text Input",
        placeholder: "Try type something",
        data: {
            inputID: "richtextinput",
            field: {
                type: "richtext",
                options: {},
            },
            validation: {
                required: false,
            },
        },
    },
    propDefinition: {
        label: { group: "Design", type: "expression", options: {} },
        placeholder: { group: "Design", type: "expression", options: {} },
        data: {
            group: "Design",
            type: "state",
            options: {
                inputID: "richtextinput",
                field: {
                    type: "richtext",
                    options: {},
                },
            },
        },
    },
    Component: (props) => {
        var _a, _b;
        const title = props.hooks.useEvaluate(props.properties.label);
        const placeholder = props.hooks.useEvaluate(props.properties.placeholder);
        const data = props.hooks.useRuntimeInput(props.properties.data, props.data.page.row, {
            validate: (value) => {
                if (typeof value === "undefined") {
                    return { error: "" };
                }
                else if (typeof value === "undefined" ||
                    !value ||
                    (value.length === 1 &&
                        // @ts-ignore
                        value[0].children.length === 1 &&
                        // @ts-ignore
                        value[0].children[0].text === "")) {
                    return { error: "Required field, Please enter the data" };
                }
            },
        });
        return (_jsxs(Box, { children: [_jsx(InputComponentLabel, { title: title, name: "rich-text", isRequired: (_a = props.properties.data.validation) === null || _a === void 0 ? void 0 : _a.required, isEmpty: title.length === 0 }), _jsxs(Qlate
                // @ts-ignore
                , Object.assign({ 
                    // @ts-ignore
                    value: (_b = data.value) !== null && _b !== void 0 ? _b : [
                        {
                            type: "paragraph",
                            children: [
                                {
                                    text: "",
                                },
                            ],
                        },
                    ], onChange: data.onChange }, { children: [_jsx(HStack, Object.assign({ padding: "12px", backgroundColor: "surface.900", borderRadius: "4px", css: css `
              & button {
                background-color: var(--chakra-colors-surface-800);
                color: var(--chakra-colors-text-900);
              }

              & button:hover,
              & button:active {
                background-color: var(--chakra-colors-snow-lightest);
              }
            ` }, { children: _jsx(Box, Object.assign({ border: "none", css: css `
                & select {
                  height: var(--chakra-sizes-8);
                  font-size: var(--chakra-fontSizes-xs);
                  border-color: #e7e7e7 !important;
                }

                & hr {
                  border-color: #e7e7e7 !important;
                }
              ` }, { children: _jsxs(Flex, Object.assign({ flexWrap: "wrap", gap: "2" }, { children: [_jsx(HeadingToolbar, {}), _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })), _jsx(BoldToolbar, {}), _jsx(ItalicToolbar, {}), _jsx(UnderlineToolbar, {}), _jsx(StrikethroughToolbar, {}), _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })), _jsx(HighlightColorToolbar, {}), _jsx(ColorTextToolbar, {}), _jsx(Divider, { orientation: "vertical" }), _jsx(AlignLeftToolbar, {}), _jsx(AlignCenterToolbar, {}), _jsx(AlignRightToolbar, {}), _jsx(AlignJustifyToolbar, {}), _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })), _jsx(UnorderedListToolbar, {}), _jsx(OrderedListToolbar, {}), _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })), _jsx(CodeToolbar, {}), _jsx(BlockQuoteToolbar, {})] })) })) })), _jsx(Box, Object.assign({ height: "300px", padding: "16px", overflowY: "auto", backgroundColor: "surface.900", borderRadius: "4px", css: css `
              & ol {
                list-style-type: decimal;
              }

              & ul {
                list-style-type: initial;
              }

              & ol > p,
              & ul > p {
                display: list-item;
              }
            ` }, { children: _jsx(QlateEditor, { placeholder: placeholder, plugins: plugins }) }))] })), !!data.validation.error && (_jsx(Text, Object.assign({ fontSize: "sm", color: "red" }, { children: data.validation.error })))] }));
    },
});
export default RichTextInput;
//# sourceMappingURL=buildRichTextInput.js.map