import Cropper from 'cropperjs/dist/cropper';
import 'cropperjs/dist/cropper.min.css';
import dataURItoBlob from './dataURItoBlob';

export default () => {
    let cachedFilename;
    let modalCrop = $('#modal-crop-image');
    let imgCrop = modalCrop.find('.image-container img');
    let lblWidth = modalCrop.find('span[data-width]');
    let lblHeight = modalCrop.find('span[data-height]');
    let lblZoom = modalCrop.find('span[data-zoom]');

    // Cropper
    // -----------------------------------------------
    let cropper = new Cropper(imgCrop[0], {
        preview: '.image-preview',
        viewMode: 2,
        movable: false,
        cropBoxResizable: true,
        ready: function (e) {
            let imageData = cropper.getImageData();
            let zoomLevel = imageData.width / imageData.naturalWidth;

            lblZoom.html('<b>Zoom:</b> ' + Math.round(zoomLevel * 100) + '%');
        },
        crop: function (event) {
            lblWidth.html('<b>W:</b> ' + Math.round(event.detail.width));
            lblHeight.html('<b>H:</b> ' + Math.round(event.detail.height));
        },
        zoom: function (e) {
            lblZoom.html('<b>Zoom:</b> ' + Math.round(e.detail.ratio * 100) + '%');
        },
    });

    // Dropzone
    // -----------------------------------------------
    let myDropzone = new Dropzone('#image-upload-widget', {
        paramName: 'file',
        maxFilesize: 3,
        acceptedFiles: 'image/*',
        autoProcessQueue: false,
        dictDefaultMessage: LOCALE.IMAGE_DROPZONE__DEFAULT_MESSAGE,
        dictFileTooBig: LOCALE.IMAGE_DROPZONE__SIZE_ERROR_MESSAGE,
        dictInvalidFileType: LOCALE.IMAGE_DROPZONE__TYPE_ERROR_MESSAGE,
    });

    myDropzone.on('addedfile', function (file) {
        if (file.cropped) {
            return;
        }

        cachedFilename = file.name;
        myDropzone.removeFile(file);

        let reader = new FileReader();
        reader.onloadend = function () {
            cropper.replace(reader.result);
            modalCrop.modal('show');
        };

        reader.readAsDataURL(file);
    });

    myDropzone.on('success', function (file) {
        this.removeFile(file);
        $('#images-wrapper').reload();
        modalCrop.modal('hide');
    });


    // Crop modal
    // -----------------------------------------------
    let btnCropAndUpload = modalCrop.find('.btn-crop-upload');
    let btnUpload = modalCrop.find('.btn-upload');

    modalCrop.modal({
        backdrop: 'static',
        keyboard: false,
        show: false,
    });

    modalCrop.on('show.bs.modal', function (e) {
        let backdrop = $('.modal-backdrop');

        if (backdrop.length > 1) {
            backdrop.not(':first').remove();
        }
    });

    btnCropAndUpload.on('click', function () {
        let blob = cropper.getCroppedCanvas().toDataURL();
        let newFile = dataURItoBlob(blob);
        newFile.name = cachedFilename;
        newFile.cropped = true;

        myDropzone.addFile(newFile);
        myDropzone.processQueue();
    });

    btnUpload.on('click', function () {
        let newFile = dataURItoBlob(imgCrop.attr('src'));
        newFile.name = cachedFilename;
        newFile.cropped = true;

        myDropzone.addFile(newFile);
        myDropzone.processQueue();
    });
};
