import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// index.tsx
import { useEffect, useState, useCallback } from "react";
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import TextAlign from '@tiptap/extension-text-align';
import StyleableTextArea from "./StyleableTextArea";
import TagSpan from "./TagSpan";
import "./style.scss";
import { getTagTranslation } from "../../utils";
import TagButtonComponent from "../TagButtonComponent";
const StyleableTextAreaContainer = ({ message, charLimits, maxLength = 360, onChange = () => false, isNextDisabled, showTagButtons, tabs, className, tagClasses, showHeader = true, headerPosition = "top", placeholder = "", showError = true, showSchoolBtn = true, }) => {
    const [editorContent, setEditorContent] = useState(message);
    const [plainTextLength, setPlainTextLength] = useState(0);
    const handleChange = useCallback((content) => {
        // Create a temporary div to extract plain text from HTML
        const tempDiv = document.createElement("div");
        tempDiv.innerHTML = content;
        // Replace tag spans with their template values before extracting text
        const tagSpans = tempDiv.querySelectorAll('span.tagStyle[data-tag]');
        tagSpans.forEach((span) => {
            const dataTag = span.getAttribute('data-tag');
            if (dataTag) {
                const tagTranslation = getTagTranslation(dataTag);
                span.textContent = tagTranslation;
            }
        });
        const plainText = tempDiv.textContent || tempDiv.innerText || "";
        setPlainTextLength(plainText.length);
        setEditorContent(content);
        onChange(plainText);
    }, [onChange]);
    // Define editor in the container
    const editor = useEditor({
        extensions: [
            StarterKit,
            Underline,
            TagSpan,
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
        ],
        content: message,
        editorProps: {
            attributes: {
                class: 'tiptap-editor',
            },
        },
        onUpdate: ({ editor }) => {
            const content = editor.getHTML();
            handleChange(content);
        },
    });
    // Handle maxLength constraints in editor
    useEffect(() => {
        if (editor && maxLength) {
            editor.setOptions({
                editorProps: {
                    ...editor.options.editorProps,
                    handlePaste: (_view, event) => {
                        const clipboardData = event.clipboardData;
                        if (clipboardData) {
                            const text = clipboardData.getData('text/plain');
                            const currentLength = editor.getText().length;
                            const remainingLength = maxLength - currentLength;
                            if (text.length > remainingLength) {
                                const truncatedText = text.slice(0, remainingLength);
                                editor.commands.insertContent(truncatedText);
                                return true;
                            }
                        }
                        return false;
                    },
                    handleKeyDown: (_view, event) => {
                        if (event.key.length === 1) {
                            const currentLength = editor.getText().length;
                            if (currentLength >= maxLength) {
                                return true;
                            }
                        }
                        return false;
                    },
                },
            });
        }
    }, [editor, maxLength]);
    const addTags = useCallback((newTag) => {
        const tagTranslation = getTagTranslation(newTag);
        if (maxLength && plainTextLength + tagTranslation.length >= maxLength) {
            return;
        }
        if (editor) {
            // Insert the tag as a node
            editor
                .chain()
                .focus()
                .insertContent({
                type: 'tagSpan',
                attrs: {
                    'data-tag': newTag,
                    text: tagTranslation,
                },
            })
                .insertContent(' ')
                .run();
        }
    }, [maxLength, plainTextLength, editor]);
    return (_jsxs("div", { children: [_jsx(StyleableTextArea, { editor: editor, value: editorContent, isNextDisabled: isNextDisabled, className: className, showHeader: showHeader, headerPosition: headerPosition, placeholder: placeholder, showError: showError }), charLimits && maxLength && (_jsx("span", { style: {
                    color: "#727272",
                    fontFamily: "Inter",
                    fontStyle: "normal",
                    fontWeight: 400,
                    fontSize: "12px",
                }, children: _jsxs("p", { className: "textAreaWithTooltip-charactersLeft", children: [maxLength - plainTextLength, " characters left"] }) })), showTagButtons && tabs && (_jsx(TagButtonComponent, { tabs: tabs, handleChange: addTags, styleableTags: true, tagClasses: tagClasses, showSchoolBtn: showSchoolBtn }))] }));
};
export default StyleableTextAreaContainer;
