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 "./TextBoxWithSuggestions.module.scss";
const TextBoxWithSuggestions = ({ heading, value, handleChange, suggestionList }) => {
    const [suggestionsActive, setSuggestionsActive] = useState([]);
    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();
            handleChange(text);
            // Reset suggestions when editor is empty
            if (text.length === 0) {
                setSuggestionsActive(prevState => prevState.map(() => false));
            }
        },
        onCreate: ({ editor }) => {
            if (value) {
                editor.commands.setContent(value);
            }
        },
        editorProps: {
            attributes: {
                class: styles['textBoxWithSuggestions-editor'],
            },
        },
    });
    // Initialize suggestions active state
    useEffect(() => {
        setSuggestionsActive(suggestionList.map(() => false));
    }, []);
    // Update editor content when value prop changes
    useEffect(() => {
        if (editor && value !== editor.getText()) {
            editor.commands.setContent(value);
        }
    }, [value, editor]);
    const addSuggestionTextToEditor = (text) => {
        if (editor) {
            editor.chain().focus().insertContent(`${text}\n`).run();
        }
    };
    return (_jsxs("div", { className: styles['textBoxWithSuggestions-Wrapper'], children: [_jsx("p", { className: styles['textBoxWithSuggestionsHeading'], children: heading }), _jsx("div", { className: styles['textBoxWithSuggestions-Container'], children: _jsx(EditorContent, { editor: editor }) }), _jsxs("div", { className: styles['textBoxWithSuggestions-SuggestionsBox'], children: [_jsx("p", { className: styles['textBoxWithSuggestions-SuggestionText'], children: "Suggestions" }), _jsx("div", { className: styles['textBoxWithSuggestions-SuggestionList'], children: suggestionList.map((suggestion, index) => (_jsx("div", { onClick: () => {
                                if (!suggestionsActive[index]) {
                                    setSuggestionsActive(prevState => prevState.map((sugg, suggIdx) => {
                                        if (suggIdx === index)
                                            return true;
                                        return sugg;
                                    }));
                                    addSuggestionTextToEditor(suggestion.suggestionText);
                                }
                            }, className: suggestionsActive[index]
                                ? styles['suggestionItem--Active']
                                : styles['suggestionItem--Generic'], children: suggestion.suggestionHeading }, index))) })] })] }));
};
export default TextBoxWithSuggestions;
