import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, useRef } from 'react';
import { EditorState, ContentState, convertFromRaw, convertToRaw, } from 'draft-js';
import { Editor as DraftEditor } from 'react-draft-wysiwyg';
import './TextEditor.scss';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import Typography from '../Typography';
import Tooltip from '../Tooltip';
import Icon from '../Icon';
import useClickOutside from '../../hooks/useClickOutside';
const TextEditor = ({ convertedContent, setConvertedContent, readOnly, toolbarHidden, toolbarOptions, label, required = false, onBlur, mode, helperText, analyticsClasses = false, error, editableTextEditor = false, onSubmit, }) => {
    const [editorState, setEditorState] = useState(null);
    const [focusState, setFocusState] = useState(false);
    const [errorMsg, setErrorMsg] = useState(false);
    const [isEditing, setIsEditing] = useState(false);
    const [initialContent, setInitialContent] = useState(convertedContent);
    const editorRef = useRef(null);
    const buttonsRef = useRef(null);
    const defaultToolBarOptions = [
        'inline',
        'blockType',
        'fontSize',
        'fontFamily',
        'list',
        'textAlign',
        'colorPicker',
        'link',
        'emoji',
        'image',
        'remove',
        'history',
    ];
    const parseContent = (content) => {
        if (!content)
            return null;
        try {
            const parsed = JSON.parse(content);
            if (parsed && typeof parsed === 'object' && parsed.blocks) {
                return parsed;
            }
            return convertToRaw(ContentState.createFromText(content));
        }
        catch (e) {
            return convertToRaw(ContentState.createFromText(content));
        }
    };
    useEffect(() => {
        let newEditorState;
        try {
            if (!checkEmpty(convertedContent)) {
                const content = parseContent(convertedContent);
                newEditorState = EditorState.createWithContent(convertFromRaw(content));
            }
            else {
                newEditorState =
                    mode === 'view' || (editableTextEditor && !isEditing)
                        ? EditorState.createWithContent(ContentState.createFromText('---'))
                        : EditorState.createEmpty();
            }
        }
        catch (e) {
            console.error('Error creating editor state:', e);
            newEditorState = EditorState.createWithContent(ContentState.createFromText(convertedContent || 'Invalid content'));
        }
        setEditorState(newEditorState);
        setInitialContent(convertedContent);
    }, [convertedContent, mode, isEditing, editableTextEditor]);
    useEffect(() => {
        let editorState = null;
        if (convertedContent?.length === 0) {
            if (mode === 'view' || (editableTextEditor && !isEditing)) {
                const content = ContentState.createFromText('---');
                editorState = EditorState.createWithContent(content);
            }
            else {
                editorState = EditorState.createEmpty();
            }
            setEditorState(editorState);
        }
    }, [convertedContent, mode, isEditing, editableTextEditor]);
    const handleEditorChange = (state) => {
        setEditorState(state);
        const currentContentAsRaw = convertToRaw(state.getCurrentContent());
        if (isEditing && currentContentAsRaw?.blocks[0]?.text === '' && required) {
            setErrorMsg(true);
        }
        else if (currentContentAsRaw?.blocks[0]?.text !== '') {
            setErrorMsg(false);
        }
    };
    const handleClickOutside = () => {
        if (editableTextEditor && isEditing && !errorMsg) {
            setIsEditing(false);
            setConvertedContent(initialContent || '');
            const content = parseContent(initialContent);
            const newEditorState = content
                ? EditorState.createWithContent(convertFromRaw(content))
                : EditorState.createWithContent(ContentState.createFromText('---'));
            setEditorState(newEditorState);
        }
    };
    useClickOutside(editorRef, handleClickOutside, [buttonsRef]);
    const handleEditorBlur = (event) => {
        if (!editableTextEditor) {
            const currentContentAsRaw = convertToRaw(editorState.getCurrentContent());
            setConvertedContent(JSON.stringify(currentContentAsRaw));
            if (currentContentAsRaw?.blocks[0]?.text === '') {
                setErrorMsg(true);
            }
        }
        if (onBlur) {
            onBlur(event);
        }
    };
    const handleDoubleClick = () => {
        if (editableTextEditor && !isEditing) {
            setIsEditing(true);
            setInitialContent(convertedContent);
            const content = parseContent(convertedContent);
            const isDashContent = content?.blocks[0]?.text === '---';
            const newEditorState = isDashContent
                ? EditorState.createEmpty()
                : content
                    ? EditorState.createWithContent(convertFromRaw(content))
                    : EditorState.createEmpty();
            setEditorState(newEditorState);
        }
    };
    const handleSubmit = () => {
        if (errorMsg) {
            return;
        }
        const currentContentAsRaw = convertToRaw(editorState.getCurrentContent());
        let contentString = JSON.stringify(currentContentAsRaw);
        if (currentContentAsRaw?.blocks[0]?.text === '') {
            contentString = JSON.stringify(convertToRaw(ContentState.createFromText('---')));
        }
        setConvertedContent(contentString);
        if (onSubmit) {
            onSubmit(contentString);
        }
        setInitialContent(contentString);
        setIsEditing(false);
    };
    const handleCancel = () => {
        setIsEditing(false);
        setConvertedContent(initialContent || '');
        const content = parseContent(initialContent);
        const newEditorState = content
            ? EditorState.createWithContent(convertFromRaw(content))
            : EditorState.createWithContent(ContentState.createFromText('---'));
        setEditorState(newEditorState);
        setErrorMsg(false);
    };
    const EditorComponent = DraftEditor;
    return (_jsxs("div", { className: "ff-textEditor-container", children: [_jsxs("div", { className: "ff-textEditor-label-asterisk-container", children: [required && _jsx(Typography, { className: "required-asterisk", children: "* " }), label && (_jsx(Typography, { lineHeight: "10px", fontWeight: "medium", fontSize: "12px", children: label }))] }), _jsx("div", { ref: editorRef, onDoubleClick: handleDoubleClick, children: _jsx(EditorComponent, { editorState: editorState, onEditorStateChange: handleEditorChange, wrapperClassName: "wrapperClass", editorClassName: `ff-heading-TextEditor-style ${analyticsClasses ? 'fontSm' : 'fontMd'}`, editorStyle: mode !== 'view' && (!editableTextEditor || isEditing)
                        ? !focusState
                            ? {
                                border: '1px solid var(--text-editor-out-focus-border-color) ',
                                borderRadius: '4px',
                            }
                            : {
                                border: '1px solid var(--text-editor-in-focus-border-color)',
                                borderRadius: '4px',
                            }
                        : { border: 'none' }, onFocus: () => {
                        setFocusState(true);
                    }, onBlur: handleEditorBlur, readOnly: editableTextEditor ? !isEditing : readOnly, toolbarHidden: editableTextEditor ? !isEditing : toolbarHidden, toolbarClassName: "ff-toolbarClass", handlePastedText: () => false, toolbar: {
                        options: Array.isArray(toolbarOptions) && toolbarOptions?.length > 0
                            ? toolbarOptions
                            : defaultToolBarOptions,
                        fontFamily: {
                            options: [
                                'Arial',
                                'Georgia',
                                'Impact',
                                'OpenSans-Regular',
                                'Tahoma',
                                'Times New Roman',
                                'Verdana',
                                'poppins',
                            ],
                        },
                    } }) }), editableTextEditor && isEditing && (_jsxs("div", { ref: buttonsRef, className: "ff-textEditor-buttons", children: [_jsx(Tooltip, { title: "Update", placement: "bottom", children: _jsx(Icon, { name: "update_icon", color: "var(--label-edit-confirm-icon)", height: 20, width: 20, hoverEffect: true, onClick: handleSubmit }) }), _jsx(Tooltip, { title: "Cancel", placement: "bottom", children: _jsx(Icon, { name: "close", color: "var(--label-edit-cancel-icon)", height: 20, width: 20, onClick: handleCancel, hoverEffect: true }) })] })), (required && errorMsg) || (helperText && error) ? (_jsx(Typography, { fontSize: 10, className: 'ff-textEditor-error-msg', as: "span", children: helperText })) : null] }));
};
export default TextEditor;
//# sourceMappingURL=TextEditor.js.map