var THUMBS_IMAGENES = "";
var MAX_FILES = 10;
var peticionMensaje = null;
var mostrarMensaje = true;

var iImagenes = 0;

$(window).on('load', function () {
    if ($(".dropzone-default").length > 0) {
        Dropzone.forElement(".dropzone-default").options.acceptedFiles = 'image/jpeg,image/png,image/jpg,image/webp';
        Dropzone.forElement(".dropzone-default").options.acceptedMimeTypes = 'image/jpeg,image/png,image/jpg,image/webp';

        Dropzone.forElement(".dropzone-default").options.maxFiles = MAX_FILES;

        Dropzone.forElement(".dropzone-default").on("complete", function (file) {
            if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                loader_off();
                ;
            }

            iImagenes++;
            console.log("imagenes: ", iImagenes);
            if (file != null && file != undefined && file.xhr != null && file.xhr != undefined && file.xhr.responseText != null && file.xhr.responseText != undefined) {
                configurar_dropzone();
                var response = JSON.parse(file.xhr.responseText);
                console.log("response", response);
                if (response.response) {
                    $(".dz-preview").each(function () {
                        if ($(this).find(".dz-filename span").text() == response.nombreOriginal) {
                            $(this).find(".dz-filename span").html(response.nombre);
                            $(this).find(".dz-image img").attr("src", response.url);
                        }
                    });
                    //show_message_alert(response.mensaje, 'success');
                } else {
                    $(".dz-preview:last-child").remove();
                    show_message_alert(response.error, 'danger');
                }
                setImagenesToSend();
            }
        });
        Dropzone.forElement(".dropzone-default").on("addedfile", function (file) {
            loader_on();
        });
        configurar_dropzone();

        Dropzone.forElement(".dropzone-default").on("removedfile", function (file) {
            eliminar_imagen(file.name);
        });

        Dropzone.forElement(".dropzone-default").on("maxfilesexceeded", function (file) {
            this.removeFile(file);
            if (iImagenes != 0) {
                $(".dropzone-msg.dz-message.needsclick").css("display", "none");
            }
            if (mostrarMensaje) {
                show_message_alert("Solo puede añadir " + MAX_FILES + " imágenes como máximo.", 'danger');
                mostrarMensaje = false;
                clearTimeout(peticionMensaje);
                peticionMensaje = setTimeout(function () {
                    mostrarMensaje = true;
                }, 2000);
            }
        });

        Dropzone.forElement(".dropzone-default").on("error", function (file, a, b) {

            console.log(file, a, b)

            if (!file.accepted) {
                this.removeFile(file);
                if (iImagenes != 0) {
                    $(".dropzone-msg.dz-message.needsclick").css("display", "none");
                }
                show_message_alert("Formato de imagen '" + file.type + "' no permitido ", 'danger');

            }

        });

        Dropzone.forElement(".dropzone-default").options.addRemoveLinks = true;
        Dropzone.forElement(".dropzone-default").options.dictRemoveFile = "";
        //Dropzone.forElement(".dropzone-default").options.previewTemplate = paraSlide();
        JSON.parse(IMAGENES).forEach(function (imagen) {
            iImagenes++;
            var mockFile = {
                name: imagen.file + '.' + imagen.extension,
                size: 0,
                elId: imagen.id,
                elActivo: imagen.activo
            };
            Dropzone.forElement(".dropzone-default").options.addedfile.call(Dropzone.forElement(".dropzone-default"), mockFile);
            Dropzone.forElement(".dropzone-default").options.thumbnail.call(Dropzone.forElement(".dropzone-default"), mockFile, ROOTPATH_DOMAIN + 'assets/images/productos/' + imagen.file + '_thumbs.' + imagen.extension);
        });

        setImagenesToSend();
    }
});

function configurar_dropzone() {
    $(".dropzone-default").sortable({
        items: ".dz-preview",
        placeholder: "ui-state-highlight dz-preview",
        containment: 'parent',
        revert: 50,
        tolerance: 'pointer',
        cursor: 'move'
    });
    $(".dropzone-default").disableSelection();

    $(".dropzone-default").bind("sortstop", function (event, ui) {

        setImagenesToSend();
    });

    $(".dropzone-default").bind("sortstop", function (event, ui) {
        var nombresAEnviar = [];
        $(".dz-preview").each(function () {
            nombresAEnviar.push($(this).find(".dz-filename span").html());
        });
    });
}

function setImagenesToSend() {
    var nombresAEnviar = [];
    $(".dz-preview").each(function () {
        nombresAEnviar.push($(this).find(".dz-filename span").html());
    });
    $("#formImagenes").val(JSON.stringify(nombresAEnviar));
}

function eliminar_imagen(file) {
    console.log("entra a eliminar")
    iImagenes--;
    if ($('input[name="formEdit"]').length) {
        console.log("entra a eliminar editando")
        $.ajax({
            dataType: 'json',
            method: "POST",
            url: ROOTPATH_DOMAIN_IDIOMA + "ajax/productos/deleteImagen",
            data: {
                formFile: file,
                tabla: "productos",
                thumbs: THUMBS_IMAGENES,
                formIdAnuncio: $('input[name="formIdAnuncio"]').val()
            }
        }).done(function (data) {

            if (data.response) {
                setImagenesToSend();
                show_message_alert(data.mensaje, "success");
            } else {
                show_message_alert(data.mensaje, "danger");
            }
        }).fail(function (data) {
            show_message_alert(data.mensaje, "danger");
        });

    } else {
        console.log("no esta ediutando")
        setImagenesToSend();
    }
}

function paraSlide() {
    return "" +
        "<div class='dz-preview dz-file-preview'>" +
        "<div data-dz-is-active class='dz-image'>" +
        "<img data-dz-thumbnail />" +
        "</div>" +
        "<div class='dz-details'>" +
        "<div class='dz-filename'>" +
        "<span data-dz-name></span>" +
        "</div>" +
        "<div class='dz-size' data-dz-size></div>" +
        "</div>" +
        "<div class='dz-progress'>" +
        "<span class='dz-upload' data-dz-uploadprogress></span>" +
        "</div>" +
        "<div class='dz-error-message'>" +
        "<span data-dz-errormessage></span>" +
        "</div>" +
        /*"<a class='editImageDropzone' ></a>" +*/
        "</div>";
}

$(document).on('click', '.editImageDropzone', function (e) {
    edit_image($(this).parent().find(".dz-filename span").html());
});

function edit_image(file) {
    KTApp.blockPage({overlayColor: "#000000", state: "primary"});
    $.ajax({
        url: ROOTPATH_DOMAIN_IDIOMA + "ajax/productos/editarImagen/" + ELEMENTO_BACK,
        method: "POST",
        data: {
            fileImage: file,
            tabla: MODULO_BACK,
            thumbs: THUMBS_IMAGENES
        },
        success: function (data) {
            KTApp.unblockPage()
            $("body").append(data);
            $('#editImagenesModal').modal('show');
            $('#editImagenesModal').on('hidden.bs.modal', function (e) {
                $('#editImagenesModal').remove();
            });
            prepare_modal_imagenes()
        }
    });
}

function prepare_modal_imagenes() {
    $("#editImagenesModal .modal-confirm").click(function () {
        $("#formEditImagenes").submit()
    });
    $("#formEditImagenes").validate(options_default_validate);
    $("#formEditImagenes").ajaxForm(options_default_ajaxform);
}

function success_function_imagenes() {
    $('#editImagenesModal').modal('hide');
    KTApp.unblockPage()
}

function error_function_imagenes() {
    KTApp.unblockPage()
    show_message_alert(data.responseJSON.error, 'danger');
}

$(document).on('click', '.hacerMiniatura', function (e) {
    hacer_miniatura($(this).attr("data-id"), $(this).attr("data-width"), $(this).attr("data-height"), $(this).attr("data-nombre"), $(this).attr("data-file"));
});

function hacer_miniatura(id, w, h, nombre, file) {
    KTApp.blockPage({overlayColor: "#000000", state: "primary"});
    $.ajax({
        url: ROOTPATH_DOMAIN_IDIOMA + "ajax/productos/editarThumbs/" + ELEMENTO_BACK,
        method: "POST",
        data: {
            id: id,
            w: w,
            h: h,
            nombre: nombre,
            file: file,
            tabla: MODULO_BACK,
            thumbs: THUMBS_IMAGENES
        },
        success: function (data) {
            KTApp.unblockPage()
            $("body").append(data);
            $('#editThumbsModal').modal('show');
            $('#editThumbsModal').on('hidden.bs.modal', function (e) {
                $('#editThumbsModal').remove();
            });
            setTimeout(function () {
                prepare_modal_thumbs()
            }, 400);
        }
    });
}

function prepare_modal_thumbs() {
    $('img#paraMiniautra').selectAreas({
        minSize: [10, 10],
        allowDelete: false,
        maxAreas: 1,
        aspectRatio: aspectRatio_imagenes,
        onChanged: debugQtyAreas,
        areas: [
            {
                x: posicionIniX_imagenes,
                y: posicionIniY_imagenes,
                width: posicionIniW_imagenes,
                height: posicionIniH_imagenes
            }
        ]
    });
    setTimeout(function () {
        debugQtyAreas()
    }, 400);
    $("#formEditThumbs").ajaxForm(options_default_ajaxform);
    $("#editThumbsModal .modal-confirm").click(function () {
        $("#formEditThumbs").submit()
    });
}

function debugQtyAreas() {
    var areas = $('img#paraMiniautra').selectAreas('areas');
    console.log(areas.length + " areas", areas);

    $("#formXNormal").val(areas[0]["x"]);
    $("#formYNormal").val(areas[0]["y"]);
    $("#formWNormal").val(areas[0]["width"]);
    $("#formHNormal").val(areas[0]["height"]);

    var areas = $('img#paraMiniautra').selectAreas('relativeAreas');
    console.log(areas.length + " areas", areas);

    $("#formXRelativa").val(areas[0]["x"]);
    $("#formYRelativa").val(areas[0]["y"]);
    $("#formWRelativa").val(areas[0]["width"]);
    $("#formHRelativa").val(areas[0]["height"]);
}

function success_function_thumbs() {
    $('#editThumbsModal').modal('hide');
    KTApp.unblockPage()
}

function error_function_thumbs() {
    KTApp.unblockPage()
    show_message_alert(data.responseJSON.error, 'danger');
}