var myDropzone;
var id;
var deleteVideosArray = [];
$(document).ready(function () {
    $('.select2').select2();
    if (window.Dropzone) {
        window.Dropzone.autoDiscover = false;
        myDropzone = new Dropzone("#dropzone", {
            createImageThumbnails: true,
            autoProcessQueue: false,
            addRemoveLinks: true,
            url: window.location.origin + "/videos/saveVideos", // Cambiar la URL para la carga de videos
            method: "post",
            maxFilesize: 100, // in MB (podrías aumentar el límite para videos)
            acceptedFiles: ".mp4, .mov, .avi", // Cambiar las extensiones aceptadas
            paramName: "video_file", // Nombre del parámetro para el archivo de video
            dictDefaultMessage: "Drop files here to upload",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            uploadMultiple: true,
            parallelUploads: 100,
            init: function () {
                let myDropzone = this;
                // Obtiene el valor del input oculto que contiene las URLs
                let urlInput = document.querySelector("input[type='hidden'][name='urls']").value;

                let urls = urlInput.split(',');

                urls.forEach(async url => {
                    if (url.trim()) {
                        if (url.includes('youtube')) {
                            const urlObject = new URL(url);
                            const youtubeId = urlObject.pathname.split('/').pop();
                            const youtubeThumbnail = `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;

                            let mockFile = { name: "Filename youtube vide " + youtubeId, size: 12345, url: url };
                            let callback = null; // Optional callback when it's done
                            let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
                            let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
                            myDropzone.displayExistingFile(mockFile, youtubeThumbnail, callback, crossOrigin, resizeThumbnail);
                        } else if (url.includes('vimeo')) {
                            const urlObject = new URL(url);
                            const vimeoId = urlObject.pathname.split('/').pop();
                            const vimeoThumbnail = `https://vumbnail.com/${vimeoId}_large.jpg`;
                            let mockFile = { name: "Filename vimeo vide " + vimeoId, size: 12345, url: url };
                            myDropzone.displayExistingFile(mockFile, vimeoThumbnail, null, null, false);
                        } else if (url.includes('s3')) {
                            const video = document.createElement('video');
                            const canvas = document.createElement('canvas');
                            const thumbnail = document.createElement('img');
                            video.setAttribute('crossorigin', 'anonymous');
                            video.src = url;
                            video.load();
                            video.addEventListener('loadeddata', function () {
                                // Seek to a specific time in the video to capture the thumbnail
                                video.currentTime = 1; // Set this to the desired time in seconds
                            }, false);
                            video.addEventListener('seeked', function () {
                                // Draw the video frame on the canvas
                                const context = canvas.getContext('2d');
                                canvas.width = video.videoWidth;
                                canvas.height = video.videoHeight;
                                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                                // Extract the thumbnail as a data URL
                                const dataURL = canvas.toDataURL('image/png');
                                let mockFile = { name: "Filename s3 video " + url, size: 12345, url: url };
                                myDropzone.displayExistingFile(mockFile, dataURL, null, null, false);
                            }, false);
                        }
                    }
                });

                this.on("success", function (file, response) {
                });
                this.on("error", function (file, errorMessage, xhr) {
                    // Mostrar mensaje de error al usuario
                    alert("Hubo un error al subir el archivo: " + errorMessage);
                });
            },
            addedfiles(files) {
                const file = files[0];
                // create a video temporal tag
                const video = document.createElement("video");
                // create a canvas temporal tag
                const canvas = document.createElement("canvas");
                // create a image temporal tag
                // const thumbnail = document.createElement("img");
                const url = URL.createObjectURL(file);

                video.src = url;
                video.load();
                video.addEventListener('loadeddata', function () {
                    // Seek to a specific time in the video to capture the thumbnail
                    video.currentTime = 2; // Set this to the desired time in seconds
                }, false);

                video.addEventListener('seeked', function () {
                    // Draw the video frame on the canvas
                    const context = canvas.getContext('2d');
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);

                    // Extract the thumbnail as a data URL
                    const dataURL = canvas.toDataURL('image/png');
                    // thumbnail.src = dataURL;

                    // Clean up
                    URL.revokeObjectURL(url);
                    const thumbnail = file.previewElement.querySelector('.dz-image img')
                    thumbnail.src = dataURL;
                    thumbnail.classList.add('dz-successful');
                    thumbnail.style = "object-fit: cover;height: 100%;width: 100%;";
                    // file.previewElement.classList.add('dz-complete');
                }, false);
            },
            removedfile: function (file) {
                if (file.name) {
                    let id = document.getElementById("id").value;
                    deleteVideosArray.push(file.url);
                }
                if (file.previewElement != null && file.previewElement.parentNode != null) {
                    file.previewElement.parentNode.removeChild(file.previewElement);
                }
                return this._updateMaxFilesReachedClass();
            }
        });
    }
});


function create() {
    createRegister(
        '/videos/create',
        Lang.get("messagesClient.videos.create_question"),
        "/videos",
        null,
        null,
        myDropzone
    );

}

function clickEdit(value) {
    $(location).attr("href", "/videos/edit/" + value);
}

function edit() {
    editRegister(
        '/videos/update/',
        Lang.get("messagesClient.videos.edit_question"),
        "/videos",
        null,
        null,
        myDropzone,
        deleteVideosArray
    );
}

function clickDelete(value) {
    deleteRegister(
        "/videos/delete/" + value,
        Lang.get("messagesClient.videos.delete_question"),
        "/videos"
    );
}

function chk(value) {
    activate(value, "/videos/active");
}

function clickDeleteProductImage(value, imageToDelete) {

    swal(Lang.get("messagesClient.videos.delete_question"), {
        buttons: {
            cancel: "No",
            Ok: true,
        },
    }).then((val) => {
        if (val == "Ok") {
            var info = {
                id: value,
                link: imageToDelete,
            };

            $.ajax({
                url: "videos/deletedVideo",
                type: "POST",
                contentType: "application/json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    "Content-Type": "application/json",
                },
                data: JSON.stringify(info),
                success: function (r) {
                    if (r.r) {
                        swal(r.m, {
                            icon: "success",
                            buttons: {
                                Ok: true,
                            },
                        }).then((val) => {
                            if (val == "Ok") {
                                $(location).attr('href', '/videos');
                            }
                        });
                    } else {
                        swal("Error", r.m, "error");
                    }
                },
                error: function (e) {
                    swal("Error", Lang.get("messagesClient.product_tag12"), "error");
                },
            });
        }
    });
}

function clickCopy(value) {
    $(location).attr("href", "/videos/add/" + value);
}