var modal;
var cropper;
var myDropzone;
var dropzone;
var cropped;
var croppedImage;

function startCropper() {
    console.log("startcropper")
    dropzone = document.getElementById('dropzone')
    cropped = document.getElementById('cropped')
    croppedImage = document.getElementById('cropped-image')
    initTingle();

    Dropzone.autoDiscover = false
    myDropzone = new Dropzone("div#dropzone", {
        url: "test",
        maxFiles: 1,
        autoProcessQueue: false,
        addedfile: file => {
            myDropzone.removeAllFiles();
            modal.open();
            openCropper(file)
        },
        maxfilesexceeded: () => {
            console.log("max File Exceeded")
        }
    });
}


function openCropper(file) {

    var pic = new FileReader();
    pic.readAsDataURL(file)
    console.log(file)
    if (cropper !== undefined) {
        cropper.destroy();
    }

    pic.onload = function () {
        image.src = pic.result
        cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            crop(event) {

            },
        });
    }
}


function initTingle() {
    modal = new tingle.modal({
        footer: true,
        stickyFooter: false,
        closeMethods: ['button', 'escape'],
        closeLabel: "Close",
        cssClass: ['custom-class-1', 'custom-class-2'],
        onOpen: function () {
        },
        onClose: function () {

        },
        beforeClose: function () {
            // here's goes some logic
            // e.g. save content before closing the modal

            return true; // close the modal
            return false; // nothing happens
        },

    });

    // set content
    modal.setContent(`<div><img id="image" class="w-full block " /></div>`);

    // add a button
    modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function () {
        crop();

        modal.close();
    });

    // add another button
    modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function () {
        // here goes some logic
        modal.close();

    });

    // open modal

}

function crop() {
    croppedImage.src = cropper.getCroppedCanvas().toDataURL('image/jpeg')

    dropzone.classList.toggle("hidden");
    cropped.classList.toggle("hidden");

    return croppedImage.src;
}

function removeCropped() {
    croppedImage.removeAttribute('src')

    dropzone.classList.toggle("hidden");
    cropped.classList.toggle("hidden");
}