declare var Cropper: any;

class PhotoCropper {

    constructor() {

        $("#target").on('load', (function() {
            Cropper.noConflict();
            this.initialCropImage($("#target"));
        }));
    }
    prepareCropper(): void {
        $("#preview-process").hide();
        $("#response-alert").hide();
        $("#response-alert .text-internal_error").hide();

        $("#thumbForm").submit(function (e) {
            let form = $(this);
            let targetUrl = form.attr("action");
            console.log(targetUrl);
            console.log(form.serialize());

            if (PhotoCropper.validateCropData()) {
                console.log("validated! Send  request");
                $.ajax({
                    type: "POST",
                    url: targetUrl,
                    data: form.serialize(),
                    beforeSend: function () {
                        $("#preview-process").show();
                    },
                    success: function (e) {
                        $("#preview-process").hide();
                        console.log(e);
                        if (e.success) {
                            window.location = e.redirectUrl;
                        }
                        else if (e.isInternalError) {
                            $("#response-alert").show();
                            $("#response-alert .text-internal_error").show();
                        }
                    }
                });
            }
            else {
                $("#response-alert").show();
                $("#response-alert .text-empty_area").show();
            }

            e.preventDefault();
        });
    }

    static validateCropData(): boolean {
        if ($("#CropX").val() == 0 && $("#CropY").val() == 0) {
            return false;
        }
        return true;
    }

    initialCropImage(img: JQuery<HTMLElement>): void {
        var console = window.console || { log: function () { } };
        var URL = window.URL || window.webkitURL;

        var $download = $('#download');
        var $dataX = $('#CropX');
        var $dataY = $('#CropY');
        var $dataHeight = $('#CropHeight');
        var $dataWidth = $('#CropWidth');
        var $dataRotate = $('#dataRotate');
        var $dataScaleX = $('#dataScaleX');
        var $dataScaleY = $('#dataScaleY');
        var $initX = $("#initX");
        var $initY = $("#initY");
        var $initW = $("#initW");
        var $initH = $("#initH");
        var options = {
            aspectRatio: 1,
            preview: '.preview-crop',
            viewMode: 0,
            ready: function (e) {

                let initialData = {
                    x: Math.round(Number($initX.val())),
                    y: Math.round(Number($initY.val())),
                    width: Math.round(Number($initW.val())),
                    height: Math.round(Number($initH.val())),
                };

                if (initialData.x > 0 && initialData.y > 0) {
                    console.log(initialData);
                    img.cropper('setData', initialData);
                }
            },
            crop: function (e) {
                $dataX.val(Math.round(e.detail.x));
                $dataY.val(Math.round(e.detail.y));
                $dataHeight.val(Math.round(e.detail.height));
                $dataWidth.val(Math.round(e.detail.width));
            }
        };

        var height = img.height() + 4;

        $('.preview-crop').css({
            width: '100%', //width,  sets the starting size to the same as orig image
            overflow: 'hidden',
            height: height,
            maxWidth: img.width(),
            maxHeight: height
        });

        img.cropper(options);
    }

    cropImage(): void {
        Cropper.noConflict();
        this.initialCropImage($("#target"));
    }
}

$(() => {
    'use strict';
    var photoCropper = new PhotoCropper();
    photoCropper.prepareCropper();
    photoCropper.cropImage();
});