import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ContentState, EditorState, RichUtils, convertToRaw, convertFromRaw, } from "draft-js";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";
import jsPDF from "jspdf";
import Editor, { composeDecorators } from "@draft-js-plugins/editor";
import createImagePlugin from "@draft-js-plugins/image";
import createAlignmentPlugin from "@draft-js-plugins/alignment";
import createFocusPlugin from "@draft-js-plugins/focus";
import createResizeablePlugin from "@draft-js-plugins/resizeable";
import createBlockDndPlugin from "@draft-js-plugins/drag-n-drop";
import createDragNDropUploadPlugin from "@draft-js-plugins/drag-n-drop-upload";
import createLinkPlugin from "@draft-js-plugins/anchor";
import { SketchPicker } from "react-color";
import html2canvas from "html2canvas";
import "draft-js/dist/Draft.css";
import { AutoBind } from "../Common/AutoBind";
import { H1Icon } from "./Icon/H1Icon";
import { H2Icon } from "./Icon/H2Icon";
import { H3Icon } from "./Icon/H3Icon";
import { UndoIcon } from "./Icon/UndoIcon";
import { RedoIcon } from "./Icon/RedoIcon";
import { Button, Link, Select, Menu, MenuItem, Switch, Typography, ClickAwayListener } from "@material-ui/core";
import { TextCenterAlignIcon } from "./Icon/TextCenterAlignIcon";
import { TextLeftAlignIcon } from "./Icon/TextLeftAlignIcon";
import { TextRightAlignIcon } from "./Icon/TextRightAlignIcon";
import { BoldIcon } from "./Icon/BoldIcon";
import { ItalicIcon } from "./Icon/ItalicIcon";
import { UnderlineIcon } from "./Icon/UnderlineIcon";
import { DeletedTextIcon } from "./Icon/DeletedTextIcon";
import { ColorPickerIcon } from "./Icon/ColorPickerIcon";
import { DotListIcon } from "./Icon/DotListIcon";
import { NumberListIcon } from "./Icon/NumberListIcon";
import { TableIcon } from "./Icon/TableIcon";
import { QuoteIcon } from "./Icon/QuoteIcon";
import { ImageIcon } from "./Icon/ImageIcon";
import { CodeIcon } from "./Icon/CodeIcon";
import { ToolbarSettingIcon } from "./Icon/ToolbarSettingIcon";
import QuoteImg from "../assets/images/icons/RichText/quote.svg";
import { CopyGrayIcon } from "./Icon/CopyGrayIcon";
import { CutGrayIcon } from "./Icon/CutGrayIcon";
import { PasteGrayIcon } from "./Icon/PasteGrayIcon";
import { DeleteGrayIcon } from "./Icon/DeleteGrayIcon";
import { DropdownOpenIcon } from "./Icon/DropdownOpenIcon";
const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
export const { AlignmentTool } = alignmentPlugin;
const decorator = composeDecorators(resizeablePlugin.decorator, alignmentPlugin.decorator, focusPlugin.decorator, blockDndPlugin.decorator);
const imagePlugin = createImagePlugin({ decorator });
const linkPlugin = createLinkPlugin();
const dragNDropFileUploadPlugin = createDragNDropUploadPlugin({
    handleUpload: () => { },
    addImage: (editorState, placeholderSrc) => {
        if (typeof placeholderSrc === "string") {
            let url = placeholderSrc;
            return imagePlugin.addImage(editorState, url, { url });
        }
        else if (placeholderSrc instanceof ArrayBuffer) {
            return imagePlugin.addImage(editorState, "", { placeholderSrc });
        }
        return editorState;
    },
});
export const plugins = [
    dragNDropFileUploadPlugin,
    blockDndPlugin,
    focusPlugin,
    alignmentPlugin,
    resizeablePlugin,
    imagePlugin,
    linkPlugin,
];
export class RichTextEditor extends React.Component {
    constructor(props) {
        super(props);
        this.editor = null;
        this.getCurrentHTML = () => {
            const rawContentState = convertToRaw(this.state.editorState.getCurrentContent());
            const html = draftToHtml(rawContentState);
            return html;
        };
        this.onChange = (editorState) => {
            console.log('onchange');
            this.setState({
                editorState: editorState,
            });
            if (this.props.updateCallback) {
                const html = this.getCurrentHTML();
                this.props.updateCallback(html);
            }
        };
        this.undoAction = () => {
            this.onChange(EditorState.undo(this.state.editorState));
        };
        this.redoAction = () => {
            this.onChange(EditorState.redo(this.state.editorState));
        };
        this.toggleBlockType = (style) => {
            this.onChange(RichUtils.toggleBlockType(this.state.editorState, style));
        };
        this.toggleInlineStyle = (style) => {
            this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, style));
        };
        this.handleKeyCommand = (command) => {
            if (command === "tab_command") {
                this.props.tabCommand && this.props.tabCommand();
                return "handled";
            }
            return "not-handled";
        };
        this.getBlockStyle = (block) => {
            switch (block.getType()) {
                case "blockquote":
                    return "RichEditor-blockquote";
                case "TEXTLEFT":
                    return "RichEditor-block-align-left";
                case "TEXTRIGHT":
                    return "RichEditor-block-align-right";
                case "TEXTCENTER":
                    return "RichEditor-block-align-center";
                default:
                    return "";
            }
        };
        this.toggleColor = (toggledColor, selection) => {
            const styleMap = Object.assign({}, this.state.styleMap);
            styleMap[`color-${toggledColor}`] = {
                color: toggledColor,
            };
            this.setState({
                styleMap: Object.assign({}, styleMap),
            });
            this.onChange(EditorState.forceSelection(this.state.editorState, selection));
            this.toggleInlineStyle(`color-${toggledColor}`);
        };
        this.focus = () => {
            var _a;
            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
        };
        this.exportPDF = () => {
            const doc = new jsPDF();
            doc.html(this.getCurrentHTML(), {
                width: 170,
                callback: (pdf) => {
                    pdf.save(`${this.props.exportFileName || "output"}.pdf`);
                },
            });
        };
        this.plugins = plugins;
        const styleMap = {
            CODE: {
                backgroundColor: "rgba(0, 0, 0, 0.05)",
                fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
                fontSize: 16,
                padding: 2,
            },
            STRIKETHROUGH: {
                textDecoration: "line-through",
            },
            UNDERLINE: {
                textDecoration: "underline",
            },
            "fontfamily-inter": {
                fontFamily: "Inter",
            },
            "fontfamily-mulish": {
                fontFamily: "Mulish",
            },
        };
        for (let i = 0; i < 16; i++) {
            styleMap[`fontsize-${8 + i}`] = {
                fontSize: `${8 + i}px`,
            };
        }
        for (let i = 0; i < 8; i++) {
            styleMap[`fontweight-${(i + 1) * 100}`] = {
                fontWeight: (i + 1) * 100,
            };
        }
        let editorState;
        if (this.props.value !== undefined && typeof this.props.value !== "string") {
            let rawState = this.props.value;
            editorState = EditorState.createWithContent(convertFromRaw(rawState));
            for (let block of rawState.blocks) {
                for (let style of block.inlineStyleRanges) {
                    if (style.style.startsWith("color-")) {
                        styleMap[style.style] = {
                            color: `${style.style.replace("color-", "")}`,
                        };
                    }
                }
            }
        }
        else {
            const blocksFromHtml = htmlToDraft(this.props.value || "", (nodeName, element) => {
                var _a;
                let color = (_a = element.style) === null || _a === void 0 ? void 0 : _a.color;
                if (color && color !== "") {
                    color = color.replaceAll(", ", ",");
                    styleMap[`color-${color}`] = {
                        color: `${color}`,
                    };
                }
                return this.getEntityType(nodeName, element, this);
            });
            const { contentBlocks, entityMap } = blocksFromHtml;
            const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
            editorState = props.value ? EditorState.createWithContent(contentState) : EditorState.createEmpty();
        }
        this.state = {
            editorState: editorState,
            styleMap: styleMap,
            showSettingsDialog: false,
            toolbarSettings: {
                view: "editor",
                toolbar: "top",
                showToolbar: true,
            },
            hideTools: false,
        };
    }
    componentDidMount() {
        Reflect.set(window, "html2canvas", html2canvas);
    }
    getEntityType(_nodeName, _element, _self) {
        return undefined;
    }
    renderToolbar() {
        const { editorState, toolbarSettings } = this.state;
        const currentStyle = editorState.getCurrentInlineStyle();
        const selection = editorState.getSelection();
        const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
        if (this.props.hideTools || this.state.hideTools)
            return null;
        return (_jsxs(RichTextEditorToolsRender, Object.assign({ "data-testid": "RichEditor-toolbar", readOnly: this.props.readOnly }, { children: [_jsx("div", Object.assign({ className: "RichEditor-toolGroup" }, { children: _jsxs(ButtonsGroup, Object.assign({ showIcon: _jsx(CopyGrayIcon, {}, void 0), toolbarSettings: toolbarSettings }, { children: [_jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.undoAction, "data-testid": "btn-richeditor-undo" }, { children: _jsx(CopyGrayIcon, {}, void 0) }), void 0),
                            _jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo" }, { children: _jsx(CutGrayIcon, {}, void 0) }), void 0),
                            _jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo" }, { children: _jsx(PasteGrayIcon, {}, void 0) }), void 0),
                            _jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo" }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0)] }), void 0) }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup" }, { children: _jsxs("div", Object.assign({ className: "RichEditor-tools" }, { children: [_jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.undoAction, "data-testid": "btn-richeditor-undo" }, { children: _jsx(UndoIcon, {}, void 0) }), void 0),
                            _jsx("span", Object.assign({ className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo" }, { children: _jsx(RedoIcon, {}, void 0) }), void 0)] }), void 0) }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup", "data-testid": "blockStyles" }, { children: _jsxs("div", Object.assign({ className: "RichEditor-tools" }, { children: [_jsxs(Select, Object.assign({ native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontfamily-${event.target.value}`);
                                }, variant: "outlined" }, { children: [_jsx("option", Object.assign({ value: "inter" }, { children: "Inter" }), void 0),
                                    _jsx("option", Object.assign({ value: "mulish" }, { children: "Mulish" }), void 0)] }), void 0),
                            _jsx(Select, Object.assign({ native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontsize-${event.target.value}`);
                                }, variant: "outlined" }, { children: Array.apply(8, Array(16)).map((_, idx) => (_jsx("option", Object.assign({ value: 8 + idx }, { children: 8 + idx }), idx))) }), void 0),
                            _jsxs(Select, Object.assign({ native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontweight-${event.target.value}`);
                                }, variant: "outlined" }, { children: [_jsx("option", Object.assign({ value: 100 }, { children: "Thin" }), void 0),
                                    _jsx("option", Object.assign({ value: 200 }, { children: "Extra Light" }), void 0),
                                    _jsx("option", Object.assign({ value: 300 }, { children: "Light" }), void 0),
                                    _jsx("option", Object.assign({ value: 400 }, { children: "Regular" }), void 0),
                                    _jsx("option", Object.assign({ value: 500 }, { children: "Medium" }), void 0),
                                    _jsx("option", Object.assign({ value: 600 }, { children: "Semi Bold" }), void 0),
                                    _jsx("option", Object.assign({ value: 700 }, { children: "Bold" }), void 0),
                                    _jsx("option", Object.assign({ value: 800 }, { children: "Extra Bold" }), void 0)] }), void 0)] }), void 0) }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup", "data-testid": "blockStyles" }, { children: _jsx(ButtonsGroup, Object.assign({ showIcon: BLOCK_TYPES[0].icon, toolbarSettings: toolbarSettings }, { children: BLOCK_TYPES.map((type) => (_jsx(ToolButton, Object.assign({ active: type.style === blockType, onToggle: this.toggleBlockType, value: type.style }, { children: type.icon }), type.style))) }), void 0) }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup", "data-testid": "blockStyles" }, { children: _jsx(ButtonsGroup, Object.assign({ showIcon: INLINE_STYLES[0].icon, toolbarSettings: toolbarSettings }, { children: INLINE_STYLES.map((type) => (_jsx(ToolButton, Object.assign({ active: currentStyle.has(type.style), onToggle: this.toggleInlineStyle, value: type.style }, { children: type.icon }), type.style))) }), void 0) }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup", "data-testid": "blockStyles" }, { children: _jsx("div", Object.assign({ className: "RichEditor-tools" }, { children: _jsx(ColorToolButton, { onChange: this.toggleColor, editorState: editorState }, void 0) }), void 0) }), void 0),
                _jsxs("div", Object.assign({ className: "RichEditor-toolGroup" }, { children: [_jsx(ButtonsGroup, Object.assign({ showIcon: ALIGN_STYLES[0].icon, toolbarSettings: toolbarSettings }, { children: ALIGN_STYLES.map((type) => (_jsx(ToolButton, Object.assign({ active: type.style ===
                                    editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: type.style }, { children: type.icon }), type.style))) }), void 0),
                        _jsxs(ButtonsGroup, Object.assign({ showIcon: _jsx(DotListIcon, {}, void 0), toolbarSettings: toolbarSettings }, { children: [_jsx(ToolButton, Object.assign({ active: "unordered-list-item" ===
                                        editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: "unordered-list-item" }, { children: _jsx(DotListIcon, {}, void 0) }), void 0),
                                _jsx(ToolButton, Object.assign({ active: "ordered-list-item" ===
                                        editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: "ordered-list-item" }, { children: _jsx(NumberListIcon, {}, void 0) }), void 0)] }), void 0),
                        _jsx("div", Object.assign({ className: "RichEditor-tools ImageContent-control" }, { children: _jsx(AlignmentTool, {}, void 0) }), void 0)] }), void 0),
                _jsx("div", Object.assign({ className: "RichEditor-toolGroup" }, { children: _jsxs("div", Object.assign({ className: "RichEditor-tools" }, { children: [_jsx("span", Object.assign({ className: "RichEditor-styleButton", "data-testid": "btn-richeditor-dot-list", onClick: () => {
                                    this.toggleBlockType("blockquote");
                                } }, { children: _jsx(QuoteIcon, {}, void 0) }), void 0),
                            _jsx(ImageUpload, { editorState: editorState, onChange: this.onChange }, void 0),
                            _jsx(AnchorButton, { editorState: editorState, onChange: this.onChange }, void 0),
                            _jsx(ToolButton, Object.assign({ active: currentStyle.has("CODE"), onToggle: this.toggleInlineStyle, value: "CODE" }, { children: _jsx(CodeIcon, {}, void 0) }), void 0),
                            _jsx("span", Object.assign({ className: "RichEditor-styleButton", "data-testid": "btn-richeditor-dot-list" }, { children: _jsx(TableIcon, {}, void 0) }), void 0)] }), void 0) }), void 0),
                _jsx(SettingButton, { settings: toolbarSettings, onChange: (setting) => {
                        this.setState({
                            toolbarSettings: Object.assign({}, setting),
                        });
                    } }, void 0)] }), void 0));
    }
    render() {
        const { editorState, toolbarSettings } = this.state;
        let className = "RichEditor-editor";
        var contentState = editorState.getCurrentContent();
        if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== "unstyled") {
                className += " RichEditor-hidePlaceholder";
            }
        }
        return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
                if (this.state.toolbarSettings.view === "click to edit") {
                    this.setState({
                        hideTools: true,
                    });
                }
            } }, { children: _jsxs(RichTextEditorRender, Object.assign({ className: "RichEditor-root", "data-testid": "Editor", hideBorder: this.props.hideBorder }, { children: [toolbarSettings.toolbar !== "bottom" && _jsx(_Fragment, { children: this.renderToolbar() }, void 0),
                    _jsx("div", Object.assign({ className: className, "data-testid": "editorComponent", onClick: this.focus }, { children: _jsx(Editor, { editorState: editorState, onChange: this.onChange, placeholder: this.props.placeholder || "Tell a story...", customStyleMap: this.state.styleMap, spellCheck: true, handleKeyCommand: this.handleKeyCommand, blockStyleFn: this.getBlockStyle, plugins: [...this.plugins, ...(this.props.plugins || [])], ref: (element) => {
                                this.editor = element;
                            }, readOnly: this.props.readOnly, onFocus: () => {
                                if (this.state.hideTools) {
                                    this.setState({
                                        hideTools: false,
                                    });
                                }
                            }, preserveSelectionOnBlur: true }, void 0) }), void 0),
                    toolbarSettings.toolbar === "bottom" && _jsx(_Fragment, { children: this.renderToolbar() }, void 0)] }), void 0) }), void 0));
    }
}
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, HTMLElement, Object]),
    __metadata("design:returntype", Object)
], RichTextEditor.prototype, "getEntityType", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", Object)
], RichTextEditor.prototype, "renderToolbar", null);
const ColorToolButton = ({ onChange, editorState }) => {
    const [color, setColor] = React.useState("#000");
    const [selection, setSelection] = React.useState(null);
    const [anchorEl, setAnchorEl] = React.useState(null);
    const openColorPicker = (event) => {
        event.stopPropagation();
        const sel = editorState.getSelection();
        if (sel) {
            setSelection(sel);
            setAnchorEl(event.currentTarget);
        }
    };
    const closeColorPicker = () => {
        setAnchorEl(null);
        setSelection(null);
    };
    const handleColorChange = (data) => {
        setColor(`rgb(${data.rgb.r},${data.rgb.g},${data.rgb.b})`);
    };
    const onApply = (event) => {
        event.stopPropagation();
        if (selection) {
            onChange(color, selection);
        }
        closeColorPicker();
    };
    const onCancel = (event) => {
        event.stopPropagation();
        closeColorPicker();
    };
    return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: "RichEditor-styleButton ColorPicker", onClick: openColorPicker, "data-testid": "styles" }, { children: _jsx(ColorPickerIcon, {}, void 0) }), void 0),
            _jsxs(ColorPickerRender, Object.assign({ anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: closeColorPicker, elevation: 0, getContentAnchorEl: null }, { children: [_jsx(SketchPicker, { onChange: handleColorChange, color: color || "" }, void 0),
                    _jsxs(StyledButtonGroup, { children: [_jsx(Link, Object.assign({ onClick: onCancel }, { children: "Cancel" }), void 0),
                            _jsx(Button, Object.assign({ onClick: onApply, color: "primary", variant: "contained" }, { children: "Apply" }), void 0)] }, void 0)] }), void 0)] }, void 0));
};
export const ImageUpload = ({ editorState, onChange }) => {
    let fileReader = null;
    const handleFileRead = (e) => {
        const content = fileReader === null || fileReader === void 0 ? void 0 : fileReader.result;
        if (content) {
            let url = null;
            if (typeof content === "string") {
                url = content;
            }
            else if (content instanceof ArrayBuffer) {
                url = "";
            }
            if (url) {
                onChange(imagePlugin.addImage(editorState, url, { url }));
            }
        }
    };
    const handleFileChosen = (file) => {
        fileReader = new FileReader();
        fileReader.onloadend = handleFileRead;
        fileReader.readAsDataURL(file);
    };
    return (_jsxs("span", Object.assign({ className: "RichEditor-styleButton FileUpload", "data-testid": "btn-richeditor-dot-list" }, { children: [_jsx(ImageIcon, {}, void 0),
            _jsx("input", { type: "file", onChange: (e) => {
                    if (e.target.files) {
                        handleFileChosen(e.target.files[0]);
                    }
                } }, void 0)] }), void 0));
};
export const AnchorButton = ({ editorState, onChange }) => {
    const [overrideContent, setOverrideContent] = React.useState();
    const onOverrideContent = (Content) => {
        if (Content) {
            setOverrideContent(new Content({
                getEditorState: () => editorState,
                setEditorState: onChange,
                onOverrideContent,
            }));
        }
        else {
            setOverrideContent(undefined);
        }
    };
    return (_jsxs("span", Object.assign({ className: "RichEditor-styleButton Anchor", "data-testid": "btn-richeditor-dot-list" }, { children: [overrideContent && overrideContent, _jsx(linkPlugin.LinkButton, { onOverrideContent: onOverrideContent }, void 0)] }), void 0));
};
export const ToolButton = (props) => {
    const onToggle = (e) => {
        e.preventDefault();
        props.onToggle && props.onToggle(props.value);
    };
    let style;
    let className = `RichEditor-styleButton ${props.className || ""}`;
    if (props.active) {
        className += " RichEditor-activeButton";
    }
    return (_jsx("span", Object.assign({ className: className, style: style, onMouseDown: onToggle, "data-testid": "styles" }, { children: props.children ? props.children : props.label ? props.label : null }), void 0));
};
export const BLOCK_TYPES = [
    { icon: _jsx(H1Icon, {}, void 0), style: "header-one" },
    { icon: _jsx(H2Icon, {}, void 0), style: "header-two" },
    { icon: _jsx(H3Icon, {}, void 0), style: "header-three" },
];
export const ALIGN_STYLES = [
    { icon: _jsx(TextLeftAlignIcon, {}, void 0), style: "TEXTLEFT" },
    { icon: _jsx(TextCenterAlignIcon, {}, void 0), style: "TEXTCENTER" },
    { icon: _jsx(TextRightAlignIcon, {}, void 0), style: "TEXTRIGHT" },
];
export const INLINE_STYLES = [
    { icon: _jsx(BoldIcon, {}, void 0), style: "BOLD" },
    { icon: _jsx(ItalicIcon, {}, void 0), style: "ITALIC" },
    { icon: _jsx(UnderlineIcon, {}, void 0), style: "UNDERLINE" },
    { icon: _jsx(DeletedTextIcon, {}, void 0), style: "STRIKETHROUGH" },
];
export const RichTextEditorRender = styled.div `
    border: 1px solid ${(props) => (props.hideBorder ? "transparent" : "#f1f1f6")};
    background: #ffffff;
    border-radius: 4px;

    .DraftEditor-root {
        box-sizing: border-box;
        border-radius: 4px;
        padding: 6px 12px;

        img:hover {
            box-shadow: 0 0 0 3px #d2e3f7;
        }
    }

    .public-DraftEditorPlaceholder-root {
        box-sizing: border-box;
    }

    // block

    .RichEditor-block-align-left {
        .public-DraftStyleDefault-block {
            text-align: left;
        }
    }

    .RichEditor-block-align-right {
        .public-DraftStyleDefault-block {
            text-align: right;
        }
    }

    .RichEditor-block-align-center {
        .public-DraftStyleDefault-block {
            text-align: center;
        }
    }

    .RichEditor-blockquote {
        .public-DraftStyleDefault-block {
            padding: 24px;

            > span {
                position: relative;
                &:first-child:before {
                    position: absolute;
                    top: -24px;
                    left: -24px;
                    width: 24px;
                    height: 24px;
                    content: url(${QuoteImg});
                }

                &:last-child:after {
                    position: absolute;
                    content: url(${QuoteImg});
                    top: 100%;
                    right: -24px;
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
`;
export const RichTextEditorToolsRender = styled.div `
    display: flex;
    align-items: align-items;
    flex-wrap: wrap;

    padding: 8px 4px;

    border-top: 1px solid rgba(39, 41, 50, 0.05);
    border-bottom: 1px solid rgba(39, 41, 50, 0.05);

    max-width: 100%;

    overflow-x: ${(props) => (props.readOnly ? "hidden" : "auto")};

    .RichEditor-toolGroup {
        display: flex;
        align-items: center;
        padding: 4px 12px;

        border-left: 1px solid rgba(39, 41, 50, 0.05);

        &:first-child {
            border-left: none;
        }
    }

    .RichEditor-tools {
        display: flex;
        align-items: center;

        margin-left: 20px;

        &:first-child {
            margin-left: 0;
        }

        &.ImageContent-control {
            > div {
                transform: scale(1) !important;
                display: flex;

                button {
                    background: transparent !important;
                    border: none !important;

                    svg {
                        width: 16px;
                        height: 16px;
                        fill: rgba(39, 41, 50, 0.5);
                    }
                }
            }
        }

        > * {
            margin-left: 4px;

            &:first-child {
                margin-left: 0px;
            }
        }
    }

    .RichEditor-styleSelect {
        padding: 6px 12px;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;

        height: auto;

        color: rgba(39, 41, 50, 0.7);

        &.MuiSelect-outlined.MuiSelect-outlined {
            padding-right: 24px;
        }
    }

    .RichEditor-styleSelectIcon.MuiSelect-iconOutlined {
        right: 0;
    }

    .RichEditor-styleButton {
        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
        border: 1px solid transparent;

        &.RichEditor-activeButton {
            border: 1px solid rgba(39, 41, 50, 0.5);
        }

        &.ColorPicker {
            position: relative;
        }

        &.FileUpload {
            position: relative;
            input {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
            }
        }

        &.Anchor {
            position: relative;

            button {
                background: transparent !important;
                border: none !important;

                svg {
                    width: 16px;
                    height: 16px;
                    fill: rgba(39, 41, 50, 0.5);
                }
            }

            input {
                position: absolute !important;
                top: 100%;
                left: 0;
            }
        }

        &.SettingsButton {
            margin-left: auto;
        }

        &:hover {
            border: 1px solid rgba(39, 41, 50, 0.1);
            box-sizing: border-box;
            border-radius: 4px;
        }
    }
`;
const StyledButtonGroup = styled.div `
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
const ColorPickerRender = styled(Menu) `
    .MuiMenu-paper {
        background: rgb(255, 255, 255);
        border-radius: 4px;
        box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px;
    }

    .sketch-picker {
        box-shadow: none !important;
    }
`;
const SettingButton = ({ settings, onChange }) => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const openSettings = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const closeSettings = () => {
        setAnchorEl(null);
    };
    const onApply = (value) => {
        onChange(value);
        closeSettings();
    };
    return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: "RichEditor-styleButton SettingsButton", "data-testid": "btn-richeditor-setting", onClick: openSettings }, { children: _jsx(ToolbarSettingIcon, {}, void 0) }), void 0),
            _jsx(Menu, Object.assign({ anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: closeSettings, anchorOrigin: {
                    vertical: "bottom",
                    horizontal: "right",
                }, elevation: 0, getContentAnchorEl: null, transformOrigin: {
                    vertical: "top",
                    horizontal: "center",
                } }, { children: _jsx("div", { children: _jsx(ToolbarSettings, { value: settings, onChange: onApply }, void 0) }, void 0) }), void 0)] }, void 0));
};
export const ToolbarSettings = ({ onChange, value }) => {
    const [state, setState] = React.useState(value);
    return (_jsxs(ToolbarSettingsRender, { children: [_jsx(Typography, Object.assign({ variant: "h5", classes: { root: "ToolbarSettings-header" } }, { children: "Toolbar Settings" }), void 0),
            _jsxs("div", Object.assign({ className: "ToolbarSettings-row" }, { children: [_jsx("label", Object.assign({ className: "ToolbarSettings-label", htmlFor: "toolbar" }, { children: "Toolbar" }), void 0),
                    _jsxs("div", Object.assign({ id: "toolbar", className: "ToolbarSettings-buttonGroup" }, { children: [_jsx(RadioButton, { selected: state.toolbar, value: "on edit", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { toolbar: newValue }));
                                } }, void 0),
                            _jsx(RadioButton, { selected: state.toolbar, value: "top", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { toolbar: newValue }));
                                } }, void 0),
                            _jsx(RadioButton, { selected: state.toolbar, value: "bottom", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { toolbar: newValue }));
                                } }, void 0),
                            _jsx(RadioButton, { selected: state.toolbar, value: "collapsed", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { toolbar: newValue }));
                                } }, void 0)] }), void 0)] }), void 0),
            _jsxs("div", Object.assign({ className: "ToolbarSettings-row" }, { children: [_jsx("label", Object.assign({ className: "ToolbarSettings-label", htmlFor: "toolbar" }, { children: "View" }), void 0),
                    _jsxs("div", Object.assign({ id: "View", className: "ToolbarSettings-buttonGroup" }, { children: [_jsx(RadioButton, { selected: state.view, value: "editor", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { view: newValue }));
                                } }, void 0),
                            _jsx(RadioButton, { selected: state.view, value: "click to edit", onSelect: (newValue) => {
                                    setState(Object.assign(Object.assign({}, state), { view: newValue }));
                                } }, void 0)] }), void 0)] }), void 0),
            _jsx("div", Object.assign({ className: "ToolbarSettings-row" }, { children: _jsxs("div", Object.assign({ className: "ToolbarSettings-check" }, { children: [_jsx("label", Object.assign({ id: "show_toolbar" }, { children: "Ability to show a toolbar" }), void 0),
                        _jsx(Switch, { color: "primary", checked: state.showToolbar, onChange: (event) => {
                                setState(Object.assign(Object.assign({}, state), { showToolbar: event.target.checked }));
                            } }, void 0)] }), void 0) }), void 0),
            _jsx("div", Object.assign({ className: "ToolbarSettings-row" }, { children: _jsx(Button, Object.assign({ onClick: () => {
                        onChange(state);
                    }, color: "primary", variant: "contained", fullWidth: true }, { children: "Apply" }), void 0) }), void 0)] }, void 0));
};
export const ToolbarSettingsRender = styled.div `
    display: flex;
    flex-direction: column;

    padding: 16px 16px 20px;

    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 8px;

    .ToolbarSettings-header {
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
    }

    .ToolbarSettings-buttonGroup {
        overflow: hidden;
        display: inline-flex;
        align-items: center;

        border: 1px solid rgba(39, 41, 50, 0.2);
        border-radius: 5px;
    }

    .ToolbarSettings-row {
        margin-top: 16px;
        label {
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0em;
            text-align: left;

            margin-bottom: 4px;
            display: block;
        }

        .ToolbarSettings-check {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
`;
export const RadioButton = ({ value, onSelect, selected }) => {
    return (_jsx(RadioButtonRender, Object.assign({ selected: value === selected, onClick: () => onSelect(value) }, { children: value }), void 0));
};
const RadioButtonRender = styled.div `
    box-sizing: border-box;

    border-left: 1px solid rgba(39, 41, 50, 0.2);
    border-right: 1px solid rgba(39, 41, 50, 0.2);

    cursor: pointer;

    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-transform: capitalize;
    min-width: 80px;

    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    translation: all 0.1s ease-in;

    ${(props) => props.selected
    ? `
        color: #fff;
        background:  #4050A6;
    `
    : `
        color: rgba(39, 41, 50, 0.7);
        background: #FCFCFE;
    `}
`;
const ButtonsGroup = ({ toolbarSettings, children, showIcon }) => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const onClose = () => {
        setAnchorEl(null);
    };
    const onOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    return (_jsx("div", Object.assign({ className: "RichEditor-tools" }, { children: toolbarSettings.toolbar !== "collapsed" ? (children) : (_jsxs(ButtonsGroupRender, { children: [_jsxs(ShowButton, Object.assign({ onClick: onOpen }, { children: [showIcon, " ", _jsx(DropdownOpenIcon, {}, void 0)] }), void 0),
                _jsx(Menu, Object.assign({ anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: onClose, anchorOrigin: {
                        vertical: "bottom",
                        horizontal: "center",
                    }, elevation: 0, getContentAnchorEl: null, transformOrigin: {
                        vertical: "top",
                        horizontal: "center",
                    } }, { children: children.map((item, idx) => (_jsx(MenuItem, Object.assign({ onClick: onClose }, { children: item }), idx))) }), void 0)] }, void 0)) }), void 0));
};
const ButtonsGroupRender = styled.div ``;
const ShowButton = styled.div `
    display: flex;
    align-items: center;
`;
//# sourceMappingURL=RichTextEditor.js.map