const inputText = document.getElementById('inputText');
const videoPlayer = document.getElementById('translationVideo');
const translateWordsBtn = document.getElementById('translateWordsBtn');
const translateLettersBtn = document.getElementById('translateLettersBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const translateBtn = document.getElementById('translateBtn'); // Prelož button

let videoSequence = [];
let currentIndex = 0;
let autoPlayEnabled = true;

// Variable to track the current translation method
let currentTranslationMode = 'words'; // Default mode

// Function to check if video exists
async function videoExists(src) {
    return new Promise(resolve => {
        const video = document.createElement('video');
        video.src = src;
        video.onloadeddata = () => resolve(true);
        video.onerror = () => resolve(false);
    });
}

// Function to load video sequence by words
async function loadVideoSequenceByWords() {
    const words = inputText.value.trim().split(' '); 
    videoSequence = [];

    for (const word of words) {
        const videoSrc = `video/${word.toLowerCase()}.mp4`;
        if (await videoExists(videoSrc)) {
            videoSequence.push(videoSrc);
        }
    }
    currentIndex = 0;
}

// Function to load video sequence by letters
async function loadVideoSequenceByLetters() {
    const characters = inputText.value.trim().split('');
    videoSequence = [];

    for (const char of characters) {
        if (/[a-zA-Z]/.test(char)) {
            const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`;
            if (await videoExists(videoSrc)) {
                videoSequence.push(videoSrc);
            }
        }
    }
    currentIndex = 0;
}

// Function to play video at a specific index
function playVideoAtIndex(index) {
    if (index < 0 || index >= videoSequence.length) return;

    videoPlayer.src = videoSequence[index];
    videoPlayer.play();
    currentIndex = index;

    // Update the title with the current letter or word
    const currentChar = videoSequence[index].split('/').pop().split('.')[0];
    document.getElementById('currentLetter').innerText = currentChar.toUpperCase();

    if (autoPlayEnabled) {
        videoPlayer.onended = () => {
            currentIndex++;
            if (currentIndex < videoSequence.length) {
                playVideoAtIndex(currentIndex);
            } else {
                autoPlayEnabled = false;
            }
        };
    } else {
        videoPlayer.onended = null;
    }
}

// Event listener for "Prelož" button (Translate button)
translateBtn.addEventListener('click', async () => {
    autoPlayEnabled = true;

    // Based on current mode, load the correct video sequence
    if (currentTranslationMode === 'words') {
        await loadVideoSequenceByWords();
    } else if (currentTranslationMode === 'letters') {
        await loadVideoSequenceByLetters();
    }

    if (videoSequence.length > 0) {
        playVideoAtIndex(currentIndex);
    }
});

// Event listener for "Preložiť po slovách" button
translateWordsBtn.addEventListener('click', () => {
    currentTranslationMode = 'words'; // Set to words mode
    translateWordsBtn.classList.add('active'); // Optionally add active class
    translateLettersBtn.classList.remove('active');
});

// Event listener for "Preložiť po písmenách" button
translateLettersBtn.addEventListener('click', () => {
    currentTranslationMode = 'letters'; // Set to letters mode
    translateLettersBtn.classList.add('active'); // Optionally add active class
    translateWordsBtn.classList.remove('active');
});

// Event listeners for prev and next buttons to navigate video sequence
prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        autoPlayEnabled = false;
        currentIndex--;
        playVideoAtIndex(currentIndex);
    }
});

nextBtn.addEventListener('click', () => {
    if (currentIndex < videoSequence.length - 1) {
        autoPlayEnabled = false;
        currentIndex++;
        playVideoAtIndex(currentIndex);
    }
});