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');

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

function videoExists(src) {
    return new Promise(resolve => {
        const video = document.createElement('video');
        video.src = src;
        video.onloadeddata = () => resolve(true);
        video.onerror = () => resolve(false);
    });
}

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;
}

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 playVideoAtIndex(index) {
    if (index < 0 || index >= videoSequence.length) return;
    videoPlayer.src = videoSequence[index];
    videoPlayer.play();
    currentIndex = index;

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

translateWordsBtn.addEventListener('click', async () => {
    autoPlayEnabled = true;
    await loadVideoSequenceByWords();
    if (videoSequence.length > 0) {
        playVideoAtIndex(currentIndex);
    }
});

translateLettersBtn.addEventListener('click', async () => {
    autoPlayEnabled = true;
    await loadVideoSequenceByLetters();
    if (videoSequence.length > 0) {
        playVideoAtIndex(currentIndex);
    }
});

prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        autoPlayEnabled = false;
        currentIndex--;
        playVideoAtIndex(currentIndex);
    }
});

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


function hideControls() {
    if (!videoPlayer.matches(':hover')) {
        videoPlayer.controls = false;
    }
    requestAnimationFrame(hideControls);
}

videoPlayer.addEventListener('mouseenter', () => {
    videoPlayer.controls = true; 
});

hideControls();