/**
 * VocabularyModule - Groups of 5 vocabulary exercise implementation
 * First exercise module following the ExerciseModuleInterface
 */

import ExerciseModuleInterface from '../interfaces/ExerciseModuleInterface.js';

class VocabularyModule extends ExerciseModuleInterface {
    constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory) {
        super();

        // Validate dependencies
        if (!orchestrator || !llmValidator || !prerequisiteEngine || !contextMemory) {
            throw new Error('VocabularyModule requires all service dependencies');
        }

        this.orchestrator = orchestrator;
        this.llmValidator = llmValidator;
        this.prerequisiteEngine = prerequisiteEngine;
        this.contextMemory = contextMemory;

        // Module state
        this.initialized = false;
        this.container = null;
        this.currentExerciseData = null;
        this.currentVocabularyGroup = [];
        this.currentWordIndex = 0;
        this.groupResults = [];
        this.isRevealed = false;

        // Configuration
        this.config = {
            groupSize: 5,
            masteryThreshold: 80, // 80% correct to consider mastered
            maxAttempts: 3,
            showPronunciation: true,
            randomizeOrder: true
        };

        // Bind methods
        this._handleNextWord = this._handleNextWord.bind(this);
        this._handleRevealAnswer = this._handleRevealAnswer.bind(this);
        this._handleUserInput = this._handleUserInput.bind(this);
        this._handleDifficultySelection = this._handleDifficultySelection.bind(this);
    }

    async init() {
        if (this.initialized) return;

        console.log('📚 Initializing VocabularyModule...');
        this.initialized = true;
        console.log('✅ VocabularyModule initialized');
    }

    /**
     * Check if module can run with current prerequisites
     * @param {Array} prerequisites - List of learned vocabulary/concepts
     * @param {Object} chapterContent - Full chapter content
     * @returns {boolean} - True if module can run
     */
    canRun(prerequisites, chapterContent) {
        // Vocabulary module can always run if there's vocabulary in the chapter
        const hasVocabulary = chapterContent && chapterContent.vocabulary &&
                             Object.keys(chapterContent.vocabulary).length > 0;

        return hasVocabulary;
    }

    /**
     * Present exercise UI and content
     * @param {HTMLElement} container - DOM container to render into
     * @param {Object} exerciseData - Specific exercise data to present
     * @returns {Promise<void>}
     */
    async present(container, exerciseData) {
        if (!this.initialized) {
            throw new Error('VocabularyModule must be initialized before use');
        }

        this.container = container;
        this.currentExerciseData = exerciseData;

        // Extract vocabulary group
        this.currentVocabularyGroup = exerciseData.vocabulary || [];
        this.currentWordIndex = 0;
        this.groupResults = [];
        this.isRevealed = false;

        if (this.config.randomizeOrder) {
            this._shuffleArray(this.currentVocabularyGroup);
        }

        console.log(`📚 Presenting vocabulary group (${this.currentVocabularyGroup.length} words)`);

        // Render initial UI
        await this._renderVocabularyExercise();

        // Start with first word
        this._presentCurrentWord();
    }

    /**
     * Validate user input with simple string matching (NO AI)
     * @param {string} userInput - User's response
     * @param {Object} context - Exercise context and expected answer
     * @returns {Promise<ValidationResult>} - Validation result with score and feedback
     */
    async validate(userInput, context) {
        if (!userInput || !userInput.trim()) {
            return {
                score: 0,
                correct: false,
                feedback: "Please provide an answer.",
                timestamp: new Date().toISOString(),
                provider: 'local'
            };
        }

        const currentWord = this.currentVocabularyGroup[this.currentWordIndex];
        const expectedTranslation = currentWord.translation;
        const userAnswer = userInput.trim();

        // Simple string matching validation (NO AI)
        const isCorrect = this._checkTranslation(userAnswer, expectedTranslation);

        const result = {
            score: isCorrect ? 100 : 0,
            correct: isCorrect,
            feedback: isCorrect
                ? "Correct! Well done."
                : `Incorrect. The correct answer is: ${expectedTranslation}`,
            timestamp: new Date().toISOString(),
            provider: 'local',
            expectedAnswer: expectedTranslation,
            userAnswer: userAnswer
        };

        // Record interaction in context memory
        this.contextMemory.recordInteraction({
            type: 'vocabulary',
            subtype: 'translation',
            content: {
                vocabulary: [currentWord],
                word: currentWord.word,
                expectedTranslation
            },
            userResponse: userAnswer,
            validation: result,
            context: { validationType: 'simple_string_match' }
        });

        return result;
    }

    /**
     * Get current progress data
     * @returns {ProgressData} - Progress information for this module
     */
    getProgress() {
        const totalWords = this.currentVocabularyGroup.length;
        const completedWords = this.groupResults.length;
        const correctWords = this.groupResults.filter(result => result.correct).length;

        return {
            type: 'vocabulary',
            totalWords,
            completedWords,
            correctWords,
            currentWordIndex: this.currentWordIndex,
            groupResults: this.groupResults,
            progressPercentage: totalWords > 0 ? Math.round((completedWords / totalWords) * 100) : 0,
            accuracyPercentage: completedWords > 0 ? Math.round((correctWords / completedWords) * 100) : 0
        };
    }

    /**
     * Clean up and prepare for unloading
     */
    cleanup() {
        console.log('🧹 Cleaning up VocabularyModule...');

        // Remove event listeners
        if (this.container) {
            this.container.innerHTML = '';
        }

        // Reset state
        this.container = null;
        this.currentExerciseData = null;
        this.currentVocabularyGroup = [];
        this.currentWordIndex = 0;
        this.groupResults = [];
        this.isRevealed = false;

        console.log('✅ VocabularyModule cleaned up');
    }

    /**
     * Get module metadata
     * @returns {Object} - Module information
     */
    getMetadata() {
        return {
            name: 'VocabularyModule',
            type: 'vocabulary',
            version: '1.0.0',
            description: 'Groups of 5 vocabulary exercises with LLM validation',
            capabilities: ['translation', 'pronunciation', 'spaced_repetition'],
            config: this.config
        };
    }

    // Private Methods

    /**
     * Check translation with simple string matching and fuzzy logic
     * @param {string} userAnswer - User's answer
     * @param {string} expectedTranslation - Expected correct answer
     * @returns {boolean} - True if answer is acceptable
     * @private
     */
    _checkTranslation(userAnswer, expectedTranslation) {
        if (!userAnswer || !expectedTranslation) return false;

        // Normalize both strings
        const normalizeString = (str) => {
            return str.toLowerCase()
                .trim()
                .replace(/[.,!?;:"'()]/g, '') // Remove punctuation
                .replace(/\s+/g, ' '); // Normalize whitespace
        };

        const normalizedUser = normalizeString(userAnswer);
        const normalizedExpected = normalizeString(expectedTranslation);

        // Exact match after normalization
        if (normalizedUser === normalizedExpected) {
            return true;
        }

        // Split expected answer into alternatives (e.g., "shirt, t-shirt" or "shirt / t-shirt")
        const alternatives = normalizedExpected.split(/[,/|;]/).map(alt => alt.trim());

        // Check if user answer matches any alternative
        for (const alternative of alternatives) {
            if (normalizedUser === alternative) {
                return true;
            }

            // Allow partial matches for single words if they're very close
            if (alternative.split(' ').length === 1 && normalizedUser.split(' ').length === 1) {
                const similarity = this._calculateSimilarity(normalizedUser, alternative);
                if (similarity > 0.85) { // 85% similarity threshold
                    return true;
                }
            }
        }

        return false;
    }

    /**
     * Calculate string similarity using simple character comparison
     * @param {string} str1 - First string
     * @param {string} str2 - Second string
     * @returns {number} - Similarity score between 0 and 1
     * @private
     */
    _calculateSimilarity(str1, str2) {
        if (str1 === str2) return 1.0;
        if (str1.length === 0 || str2.length === 0) return 0.0;

        // Simple character-based similarity
        const longer = str1.length > str2.length ? str1 : str2;
        const shorter = str1.length > str2.length ? str2 : str1;

        if (longer.length === 0) return 1.0;

        const editDistance = this._levenshteinDistance(str1, str2);
        return (longer.length - editDistance) / longer.length;
    }

    /**
     * Calculate Levenshtein distance between two strings
     * @param {string} str1 - First string
     * @param {string} str2 - Second string
     * @returns {number} - Edit distance
     * @private
     */
    _levenshteinDistance(str1, str2) {
        const matrix = [];

        for (let i = 0; i <= str2.length; i++) {
            matrix[i] = [i];
        }

        for (let j = 0; j <= str1.length; j++) {
            matrix[0][j] = j;
        }

        for (let i = 1; i <= str2.length; i++) {
            for (let j = 1; j <= str1.length; j++) {
                if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
                    matrix[i][j] = matrix[i - 1][j - 1];
                } else {
                    matrix[i][j] = Math.min(
                        matrix[i - 1][j - 1] + 1,
                        matrix[i][j - 1] + 1,
                        matrix[i - 1][j] + 1
                    );
                }
            }
        }

        return matrix[str2.length][str1.length];
    }

    async _renderVocabularyExercise() {
        if (!this.container) return;

        const totalWords = this.currentVocabularyGroup.length;
        const progressPercentage = totalWords > 0 ?
            Math.round((this.currentWordIndex / totalWords) * 100) : 0;

        this.container.innerHTML = `
            <div class="vocabulary-exercise">
                <div class="exercise-header">
                    <h2>📚 Vocabulary Practice</h2>
                    <div class="progress-info">
                        <span class="progress-text">
                            Word ${this.currentWordIndex + 1} of ${totalWords}
                        </span>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${progressPercentage}%"></div>
                        </div>
                    </div>
                </div>

                <div class="vocabulary-card" id="vocabulary-card">
                    <!-- Card content will be populated by _presentCurrentWord -->
                </div>

                <div class="exercise-controls" id="exercise-controls">
                    <!-- Controls will be populated dynamically -->
                </div>

                <div class="group-results" id="group-results" style="display: none;">
                    <!-- Results will be shown when group is complete -->
                </div>
            </div>
        `;

        // Add CSS styles
        this._addStyles();
    }

    _presentCurrentWord() {
        if (this.currentWordIndex >= this.currentVocabularyGroup.length) {
            this._showGroupResults();
            return;
        }

        const currentWord = this.currentVocabularyGroup[this.currentWordIndex];
        const card = document.getElementById('vocabulary-card');
        const controls = document.getElementById('exercise-controls');

        if (!card || !controls) return;

        this.isRevealed = false;

        card.innerHTML = `
            <div class="word-card">
                <div class="word-display">
                    <h3 class="target-word">${currentWord.word}</h3>
                    ${this.config.showPronunciation && currentWord.pronunciation ?
                        `<div class="pronunciation">[${currentWord.pronunciation}]</div>` : ''}
                    <div class="word-type">${currentWord.type || 'word'}</div>
                </div>

                <div class="answer-section" id="answer-section">
                    <div class="translation-input">
                        <label for="translation-input">Translation:</label>
                        <input type="text"
                               id="translation-input"
                               placeholder="Enter the translation..."
                               autocomplete="off">
                    </div>
                </div>

                <div class="revealed-answer" id="revealed-answer" style="display: none;">
                    <div class="correct-translation">
                        <strong>Correct Answer:</strong> ${currentWord.translation}
                    </div>
                    ${this.config.showPronunciation && currentWord.pronunciation ?
                        `<div class="pronunciation-text">[${currentWord.pronunciation}]</div>` : ''}
                </div>
            </div>
        `;

        controls.innerHTML = `
            <div class="control-buttons">
                <button id="reveal-btn" class="btn-secondary">Reveal Answer</button>
                <button id="submit-btn" class="btn-primary">Submit</button>
            </div>
        `;

        // Add event listeners
        document.getElementById('reveal-btn').onclick = this._handleRevealAnswer;
        document.getElementById('submit-btn').onclick = this._handleUserInput;

        // Allow Enter key to submit
        const input = document.getElementById('translation-input');
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this._handleUserInput();
            }
        });

        // Focus on input
        input.focus();
    }

    async _handleUserInput() {
        const input = document.getElementById('translation-input');
        const userInput = input ? input.value.trim() : '';

        if (!userInput) {
            this._showFeedback('Please enter a translation.', 'warning');
            return;
        }

        // Disable input during validation
        this._setInputEnabled(false);
        this._showFeedback('Checking answer...', 'info');

        try {
            const validationResult = await this.validate(userInput, {});

            // Store result
            this.groupResults[this.currentWordIndex] = {
                word: this.currentVocabularyGroup[this.currentWordIndex].word,
                userAnswer: userInput,
                correct: validationResult.correct,
                score: validationResult.score,
                feedback: validationResult.feedback,
                timestamp: new Date().toISOString()
            };

            // Show result and difficulty selection
            this._showValidationResult(validationResult);

        } catch (error) {
            console.error('Validation error:', error);
            this._showFeedback('Error validating answer. Please try again.', 'error');
            this._setInputEnabled(true);
        }
    }

    _handleRevealAnswer() {
        const revealedSection = document.getElementById('revealed-answer');
        const answerSection = document.getElementById('answer-section');

        if (revealedSection && answerSection) {
            revealedSection.style.display = 'block';
            answerSection.style.display = 'none';
            this.isRevealed = true;

            // Mark as incorrect since user revealed the answer
            this.groupResults[this.currentWordIndex] = {
                word: this.currentVocabularyGroup[this.currentWordIndex].word,
                userAnswer: '[revealed]',
                correct: false,
                score: 0,
                feedback: 'Answer was revealed',
                timestamp: new Date().toISOString()
            };

            this._showDifficultySelection();
        }
    }

    _showValidationResult(validationResult) {
        const feedbackClass = validationResult.correct ? 'success' : 'error';
        this._showFeedback(validationResult.feedback, feedbackClass);

        // Show correct answer if incorrect
        if (!validationResult.correct) {
            const revealedSection = document.getElementById('revealed-answer');
            if (revealedSection) {
                revealedSection.style.display = 'block';
            }
        }

        // Show difficulty selection
        setTimeout(() => {
            this._showDifficultySelection();
        }, 2000);
    }

    _showDifficultySelection() {
        const controls = document.getElementById('exercise-controls');
        if (!controls) return;

        controls.innerHTML = `
            <div class="difficulty-selection">
                <p>How difficult was this word?</p>
                <div class="difficulty-buttons">
                    <button class="difficulty-btn btn-error" data-difficulty="again">
                        Again (< 1 min)
                    </button>
                    <button class="difficulty-btn btn-warning" data-difficulty="hard">
                        Hard (< 6 min)
                    </button>
                    <button class="difficulty-btn btn-primary" data-difficulty="good">
                        Good (< 10 min)
                    </button>
                    <button class="difficulty-btn btn-success" data-difficulty="easy">
                        Easy (< 4 days)
                    </button>
                </div>
            </div>
        `;

        // Add event listeners for difficulty buttons
        document.querySelectorAll('.difficulty-btn').forEach(btn => {
            btn.onclick = (e) => this._handleDifficultySelection(e.target.dataset.difficulty);
        });
    }

    _handleDifficultySelection(difficulty) {
        const currentWord = this.currentVocabularyGroup[this.currentWordIndex];

        // Update result with difficulty
        if (this.groupResults[this.currentWordIndex]) {
            this.groupResults[this.currentWordIndex].difficulty = difficulty;
        }

        // Mark word as mastered if good or easy
        if (['good', 'easy'].includes(difficulty)) {
            const metadata = {
                difficulty: difficulty,
                sessionId: this.orchestrator?.sessionId || 'unknown',
                moduleType: 'vocabulary',
                attempts: this.groupResults[this.currentWordIndex]?.attempts || 1,
                correct: this.groupResults[this.currentWordIndex]?.correct || false
            };
            this.prerequisiteEngine.markWordMastered(currentWord.word, metadata);

            // Also save to persistent storage
            if (window.addMasteredItem && this.orchestrator?.bookId && this.orchestrator?.chapterId) {
                window.addMasteredItem(
                    this.orchestrator.bookId,
                    this.orchestrator.chapterId,
                    'vocabulary',
                    currentWord.word,
                    metadata
                );
            }
        }

        console.log(`Word "${currentWord.word}" marked as ${difficulty}`);

        // Move to next word
        this.currentWordIndex++;
        this._presentCurrentWord();
    }

    _handleNextWord() {
        this.currentWordIndex++;
        this._presentCurrentWord();
    }

    _showGroupResults() {
        const resultsContainer = document.getElementById('group-results');
        const card = document.getElementById('vocabulary-card');
        const controls = document.getElementById('exercise-controls');

        if (!resultsContainer) return;

        const correctCount = this.groupResults.filter(result => result.correct).length;
        const totalCount = this.groupResults.length;
        const accuracy = totalCount > 0 ? Math.round((correctCount / totalCount) * 100) : 0;

        let resultClass = 'results-poor';
        if (accuracy >= 80) resultClass = 'results-excellent';
        else if (accuracy >= 60) resultClass = 'results-good';

        const resultsHTML = `
            <div class="group-results-content ${resultClass}">
                <h3>📊 Group Results</h3>
                <div class="results-summary">
                    <div class="accuracy-display">
                        <span class="accuracy-number">${accuracy}%</span>
                        <span class="accuracy-label">Accuracy</span>
                    </div>
                    <div class="count-display">
                        ${correctCount} / ${totalCount} correct
                    </div>
                </div>

                <div class="word-results">
                    ${this.groupResults.map((result, index) => `
                        <div class="word-result ${result.correct ? 'correct' : 'incorrect'}">
                            <span class="word-name">${result.word}</span>
                            <span class="user-answer">"${result.userAnswer}"</span>
                            <span class="result-icon">${result.correct ? '✅' : '❌'}</span>
                        </div>
                    `).join('')}
                </div>

                <div class="results-actions">
                    <button id="continue-btn" class="btn-primary">Continue to Next Exercise</button>
                </div>
            </div>
        `;

        resultsContainer.innerHTML = resultsHTML;
        resultsContainer.style.display = 'block';

        // Hide other sections
        if (card) card.style.display = 'none';
        if (controls) controls.style.display = 'none';

        // Add continue button listener
        document.getElementById('continue-btn').onclick = () => {
            // Emit completion event to orchestrator
            this.orchestrator._eventBus.emit('drs:exerciseCompleted', {
                moduleType: 'vocabulary',
                results: this.groupResults,
                progress: this.getProgress()
            }, 'VocabularyModule');
        };
    }

    _setInputEnabled(enabled) {
        const input = document.getElementById('translation-input');
        const submitBtn = document.getElementById('submit-btn');
        const revealBtn = document.getElementById('reveal-btn');

        if (input) input.disabled = !enabled;
        if (submitBtn) submitBtn.disabled = !enabled;
        if (revealBtn) revealBtn.disabled = !enabled;
    }

    _showFeedback(message, type = 'info') {
        // Create or update feedback element
        let feedback = document.getElementById('feedback-message');
        if (!feedback) {
            feedback = document.createElement('div');
            feedback.id = 'feedback-message';
            feedback.className = 'feedback-message';

            const card = document.getElementById('vocabulary-card');
            if (card) {
                card.appendChild(feedback);
            }
        }

        feedback.className = `feedback-message feedback-${type}`;
        feedback.textContent = message;
        feedback.style.display = 'block';

        // Auto-hide info messages
        if (type === 'info') {
            setTimeout(() => {
                if (feedback) {
                    feedback.style.display = 'none';
                }
            }, 3000);
        }
    }

    _shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    _addStyles() {
        if (document.getElementById('vocabulary-module-styles')) return;

        const styles = document.createElement('style');
        styles.id = 'vocabulary-module-styles';
        styles.textContent = `
            .vocabulary-exercise {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
            }

            .exercise-header {
                text-align: center;
                margin-bottom: 30px;
            }

            .progress-info {
                margin-top: 10px;
            }

            .progress-bar {
                width: 100%;
                height: 8px;
                background-color: #e0e0e0;
                border-radius: 4px;
                margin-top: 5px;
                overflow: hidden;
            }

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #667eea, #764ba2);
                transition: width 0.3s ease;
            }

            .vocabulary-card {
                background: white;
                border-radius: 12px;
                padding: 30px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                margin-bottom: 20px;
            }

            .word-display {
                text-align: center;
                margin-bottom: 30px;
            }

            .target-word {
                font-size: 2.5em;
                color: #333;
                margin-bottom: 10px;
                font-weight: bold;
            }

            .pronunciation {
                font-style: italic;
                color: #666;
                margin-bottom: 5px;
            }

            .word-type {
                color: #888;
                font-size: 0.9em;
                text-transform: uppercase;
            }

            .translation-input {
                margin-bottom: 20px;
            }

            .translation-input label {
                display: block;
                margin-bottom: 8px;
                font-weight: bold;
                color: #555;
            }

            .translation-input input {
                width: 100%;
                padding: 12px;
                font-size: 1.1em;
                border: 2px solid #ddd;
                border-radius: 8px;
                box-sizing: border-box;
            }

            .translation-input input:focus {
                border-color: #667eea;
                outline: none;
            }

            .revealed-answer {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                margin-top: 15px;
            }

            .correct-translation {
                font-size: 1.2em;
                color: #28a745;
                margin-bottom: 5px;
            }

            .pronunciation-text {
                font-style: italic;
                color: #666;
            }

            .exercise-controls {
                text-align: center;
            }

            .control-buttons {
                display: flex;
                gap: 15px;
                justify-content: center;
            }

            .difficulty-selection {
                text-align: center;
            }

            .difficulty-buttons {
                display: flex;
                gap: 10px;
                justify-content: center;
                flex-wrap: wrap;
                margin-top: 15px;
            }

            .difficulty-btn {
                padding: 10px 15px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.9em;
                transition: all 0.3s ease;
            }

            .group-results-content {
                background: white;
                border-radius: 12px;
                padding: 30px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                text-align: center;
            }

            .results-summary {
                margin-bottom: 30px;
            }

            .accuracy-display {
                margin-bottom: 10px;
            }

            .accuracy-number {
                font-size: 3em;
                font-weight: bold;
                display: block;
            }

            .results-excellent .accuracy-number { color: #28a745; }
            .results-good .accuracy-number { color: #ffc107; }
            .results-poor .accuracy-number { color: #dc3545; }

            .word-results {
                text-align: left;
                margin-bottom: 30px;
            }

            .word-result {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                margin-bottom: 5px;
                border-radius: 8px;
                background-color: #f8f9fa;
            }

            .word-result.correct { background-color: #d4edda; }
            .word-result.incorrect { background-color: #f8d7da; }

            .feedback-message {
                padding: 10px;
                border-radius: 8px;
                margin-top: 15px;
                text-align: center;
            }

            .feedback-info { background-color: #d1ecf1; color: #0c5460; }
            .feedback-success { background-color: #d4edda; color: #155724; }
            .feedback-warning { background-color: #fff3cd; color: #856404; }
            .feedback-error { background-color: #f8d7da; color: #721c24; }

            .btn-primary {
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                border: none;
                padding: 12px 24px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 1em;
                transition: all 0.3s ease;
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            }

            .btn-secondary {
                background: #6c757d;
                color: white;
                border: none;
                padding: 12px 24px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 1em;
                transition: all 0.3s ease;
            }

            .btn-secondary:hover {
                background: #5a6268;
            }

            .btn-success { background-color: #28a745; color: white; }
            .btn-warning { background-color: #ffc107; color: #212529; }
            .btn-error { background-color: #dc3545; color: white; }

            button:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
        `;

        document.head.appendChild(styles);
    }
}

export default VocabularyModule;