// Seleciona o elemento com o id 'next'
let nextDom = document.getElementById('next');

// Seleciona o elemento com o id 'prev'
let prevDom = document.getElementById('prev');

// Seleciona o elemento com a classe 'carousel2'
let carouselDom = document.querySelector('.carousel2');

// Seleciona o elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
let listItemDom = document.querySelector('.carousel2 .list');

// Seleciona o elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
let thumbnailDom = document.querySelector('.carousel2 .thumbnail');

// Define a função que será chamada quando o elemento 'nextDom' for clicado
nextDom.onclick = function () {
    showSlider('next');
}

// Define a função que será chamada quando o elemento 'prevDom' for clicado
prevDom.onclick = function () {
    showSlider('prev');
}

// Define o tempo de execução em milissegundos para a transição dos slides
let timeRunning = 3000;

// Variável para armazenar o identificador do temporizador setTimeout
let runTimeOut;

// Define a função responsável por mostrar o próximo ou o slide anterior
function showSlider(type) {
    // Seleciona todos os itens de slide dentro do elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
    let itemSlider = document.querySelectorAll('.carousel2 .list .item');

    // Seleciona todos os itens de miniatura dentro do elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
    let itemThumbnail = document.querySelectorAll('.carousel2  .thumbnail .item');

    // Verifica se o tipo de ação é para mostrar o próximo slide
    if (type === 'next') {
        // Adiciona o primeiro item de slide como o último filho do elemento com a classe 'list'
        listItemDom.appendChild(itemSlider[0]);

        // Adiciona o primeiro item de miniatura como o último filho do elemento com a classe 'thumbnail'
        thumbnailDom.appendChild(itemThumbnail[0]);

        // Adiciona a classe 'next' ao elemento com a classe 'carousel2'
        carouselDom.classList.add('next');

        // Adiciona a classe 'time' ao elemento com a classe 'carousel2' (possível erro de sintaxe, deve ser corrigido)
        carouselDom.classList.add('.time');
    } else {
        // Calcula a posição do último item de slide
        let postionLastItem = itemSlider.length - 1;

        // Adiciona o último item de slide como o primeiro filho do elemento com a classe 'list'
        listItemDom.prepend(itemSlider[postionLastItem]);

        // Adiciona o último item de miniatura como o primeiro filho do elemento com a classe 'thumbnail'
        thumbnailDom.prepend(itemThumbnail[postionLastItem]);

        // Adiciona a classe 'prev' ao elemento com a classe 'carousel2'
        carouselDom.classList.add('prev');

        // Adiciona a classe 'time' ao elemento com a classe 'carousel2' (possível erro de sintaxe, deve ser corrigido)
        carouselDom.classList.add('.time');
    }

    // Remove as classes de animação após um certo tempo
    clearTimeout(runTimeOut);
    runTimeOut = setTimeout(() => {
        carouselDom.classList.remove('next');
        carouselDom.classList.remove('prev');
    }, timeRunning);
}

// Adiciona manipuladores de eventos às miniaturas
thumbnailDom.querySelectorAll('.item').forEach((thumbnail, index) => {
    thumbnail.addEventListener('click', () => {
        // Obtém o novo índice do item de slide a ser mostrado com base no índice da miniatura clicada
        let newIndex = Array.from(thumbnail.parentNode.children).indexOf(thumbnail);

        // Chama a função showSlide com o novo índice
        showSlide(newIndex);
    });
});

// Define a função responsável por mostrar um slide específico com base no novo índice
function showSlide(newIndex) {
    // Seleciona novamente todos os itens de slide dentro do elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
    let itemSlider = document.querySelectorAll('.carousel2 .list .item');

    // Seleciona novamente todos os itens de miniatura dentro do elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
    let itemThumbnail = document.querySelectorAll('.carousel2 .thumbnail .item');

    // Move o item correspondente ao novo índice para a primeira posição na lista de slides
    listItemDom.prepend(itemSlider[newIndex]);

    // Move a miniatura correspondente ao novo índice para a primeira posição na lista de miniaturas
    thumbnailDom.prepend(itemThumbnail[newIndex]);

    // Atualiza os índices das miniaturas
    thumbnailDom.querySelectorAll('.item').forEach((thumbnail, index) => {
        thumbnail.setAttribute('data-index', index);
    });
}