import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import styles from "./TextAreaWithTooltip.module.scss";
const TextAreaWithTooltip = ({ value, handleChange, placeholder = "", customStyles = {}, maxLength, }) => {
    const [characterCount, setCharacterCount] = useState(0);
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                // Disable features we don't need for a simple text area
                heading: false,
                bold: false,
                italic: false,
                strike: false,
                code: false,
                codeBlock: false,
                blockquote: false,
                horizontalRule: false,
                bulletList: false,
                orderedList: false,
                listItem: false,
            }),
        ],
        content: value,
        editable: true,
        onUpdate: ({ editor }) => {
            const text = editor.getText();
            const textLength = text.length;
            setCharacterCount(textLength);
            // Handle max length constraint
            if (maxLength && textLength > maxLength) {
                const truncatedText = text.substring(0, maxLength);
                editor.commands.setContent(truncatedText);
                return;
            }
            handleChange(text);
        },
        onCreate: ({ editor }) => {
            if (value) {
                editor.commands.setContent(value);
                setCharacterCount(editor.getText().length);
            }
        },
        editorProps: {
            attributes: {
                class: styles['textAreaWithTooltip-editor'],
            },
            handlePaste: (_view, event) => {
                if (!maxLength) {
                    return false; // Let Tiptap handle normally
                }
                const paste = event.clipboardData?.getData('text/plain') || '';
                const currentText = editor?.getText() || '';
                const remainingCharacters = maxLength - currentText.length;
                if (remainingCharacters <= 0) {
                    event.preventDefault();
                    return true;
                }
                if (paste.length > remainingCharacters) {
                    const truncatedPaste = paste.substring(0, remainingCharacters);
                    event.preventDefault();
                    editor?.commands.insertContent(truncatedPaste);
                    return true;
                }
                return false; // Let Tiptap handle normally
            },
            handleTextInput: (_view, _from, _to, _text) => {
                if (!maxLength) {
                    return false; // Let Tiptap handle normally
                }
                const currentText = editor?.getText() || '';
                if (currentText.length >= maxLength) {
                    return true; // Block the input
                }
                return false; // Let Tiptap handle normally
            },
        },
    });
    // Update editor content when value prop changes
    useEffect(() => {
        if (editor && value !== editor.getText()) {
            editor.commands.setContent(value);
            setCharacterCount(editor.getText().length);
        }
    }, [value, editor]);
    // Handle character limit through editor configuration
    useEffect(() => {
        if (editor && maxLength) {
            const text = editor.getText();
            if (text.length > maxLength) {
                const truncatedText = text.substring(0, maxLength);
                editor.commands.setContent(truncatedText);
                setCharacterCount(maxLength);
            }
        }
    }, [editor, maxLength, characterCount]);
    return (_jsxs("div", { className: styles['textAreaWithTooltip-Wrapper'], children: [_jsxs("div", { className: styles['textAreaWithTooltip-Container'], style: customStyles, children: [_jsx(EditorContent, { editor: editor }), !editor?.getText() && (_jsx("div", { className: styles['textAreaWithTooltip-placeholder'], children: placeholder }))] }), maxLength && (_jsxs("p", { className: styles['textAreaWithTooltip-charactersLeft'], children: [maxLength - characterCount, " characters left"] }))] }));
};
export default TextAreaWithTooltip;
