export function playNextPlaylistVideo() {
    console.log('Playing next episode');
    if (!document.getElementById("playlist_id")) {
        console.log('No playlist specified');
        return;
    }

    var playlistId = document.getElementById("playlist_id").value;
    var nextEpisode = document.getElementById("playlist_next_episode_slug").value;

    if (nextEpisode === ""){
        return;
    }

    window.location.href = '/hentai/' + nextEpisode + '?playlist=' + playlistId;
}

function deleteEntry(playlistId, episodeId) {
    window.axios.post('/user/playlist-episode', {
        playlist: playlistId,
        episode: episodeId
    }).then(function (response) {
        if (response.status == 200) {
            console.log(response);
            if (response.data.message == 'success') {
                Swal.fire({
                    title: "Deleted!",
                    text: "Removed entry from playlist!",
                    icon: "success",
                    confirmButtonText: "OK",
                    willClose: () => {
                        location.reload();
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                      location.reload();
                    }
                  });
            }
        }
    }).catch(function (error) {
        Swal.fire({
            title: "Error!",
            text: error,
            icon: "error"
        });
        console.log(error);
    });
}

function addDesktopDeleteListener() {
    const deleteButtons = document.querySelectorAll('[id^="delD"]');

    deleteButtons.forEach(button => {
        const playlist = button.id.split('-')[1];
        const episode = button.id.split('-')[2];
        console.log("Playlist: " + playlist + " Episode:  " + episode);

        button.addEventListener('click', () => deleteEntry(playlist, episode));
    });
}

// Playlist Swipe (Delete)
document.addEventListener('DOMContentLoaded', () => {
    const swipeContainers = document.querySelectorAll('.swipe-container');

    var swipeOptions = {
        dragLockToAxis: true,
        dragBlockHorizontal: true
    };

    swipeContainers.forEach(container => {
        const controls = new Hammer(container, swipeOptions);
        const originalColor = container.style.backgroundColor;
        const playlistId = container.id.split('-')[0];
        const episodeId = container.id.split('-')[1];
        const delIcon = document.getElementById('del-' + container.id);

        // Set the initial position
        let posX = 0;

        // Listen for the pan gesture
        controls.on('pan', (event) => {
            // Update the X position based on the drag delta
            posX = event.deltaX;
            if (posX > 0) {
                // Only allow left swipe
                posX = 0;
            }

            // Apply the translation to the element
            container.style.transform = `translateX(${posX}px)`;
            container.style.backgroundColor  = "rgba(159, 18, 18, 0.3)";

            setTimeout(() => {
                delIcon.classList.remove('fa-grip-lines-vertical');
                delIcon.classList.add('fa-trash');
            }, 300);
        });

        controls.on('panend', () => {
            container.style.transition = 'transform 0.3s ease';
            container.style.transform = 'translateX(0)';
            setTimeout(() => {
                container.style.transition = ''; // Reset transition for next drag
                container.style.backgroundColor = originalColor;
                delIcon.classList.remove('fa-trash');
                delIcon.classList.add('fa-grip-lines-vertical');
            }, 300);
        });

        controls.on('swipeleft', (event) => {
            container.style.display = 'none';
            console.log(playlistId, episodeId);
            deleteEntry(playlistId, episodeId);
        });
    });

    addDesktopDeleteListener();
});