var wrapper = document.getElementById("signature-pad");
var _canvas = wrapper.querySelector("canvas");
var _signature_pad_body = wrapper.querySelector(".signature-pad--body");
var _signature_pad_footer = wrapper.querySelector(".signature-pad--footer");
jQuery(function($){
    var _signature_pad = $("#signature-pad");
    var _clearButton = _signature_pad.find("[data-action=clear]");
    var _undoButton = _signature_pad.find("[data-action=undo]");
    var _savePNGButton = _signature_pad.find("[data-action=save-png]");
    var _saveJPGButton = _signature_pad.find("[data-action=save-jpg]");
    var _saveSVGButton = _signature_pad.find("[data-action=save-svg]");
    var _saveIMGButton = _signature_pad.find("[data-action=save-img]");
    var _right_tp = "";
    var countDownDate = moment().add(60 * 5,'seconds');
    var _countdown;
    var _signature;

    /*var _canvas = document.getElementById("sign-canvas"); */
    var _signaturePad = new SignaturePad(_canvas, {
        backgroundColor: 'transparent'
    });
    var _signature_modal = $('#sign-modal');
    _canvas.width = '100%';
    _canvas.height = '400px';

    $.resizeCanvas = function() {
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        _canvas.width = _canvas.offsetWidth * ratio;
        _canvas.height = _canvas.offsetHeight * ratio;
        _canvas.getContext("2d").scale(ratio, ratio);
        _signaturePad.clear();
    };

    window.onresize = $.resizeCanvas;
    $.resizeCanvas();

    _signature_modal.on('shown.bs.modal',function(event){
        var button = $(event.relatedTarget);
        _right_tp = button.data('whatever');
        
        $.resizeCanvas()
    });

    $.download = function(dataURL, filename) {
        if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
          window.open(dataURL);
        } else {
          var blob = $.dataURLToBlob(dataURL);
          var url = window.URL.createObjectURL(blob);
      
          var a = document.createElement("a");
          a.style = "display: none";
          a.href = url;
          a.download = filename;
      
          document.body.appendChild(a);
          a.click();
      
          window.URL.revokeObjectURL(url);
        }
    };

    $.dataURLToBlob = function(dataURL) {
        // Code taken from https://github.com/ebidel/filer.js
        var parts = dataURL.split(';base64,');
        var contentType = parts[0].split(":")[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
      
        for (var i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
      
        return new Blob([uInt8Array], { type: contentType });
    };

    _clearButton.click(function (event) {
        _signaturePad.clear();
    });
      
    _undoButton.click(function (event) {
        var data = _signaturePad.toData();
        
        if (data) {
            data.pop(); // remove the last dot or line
            _signaturePad.fromData(data);
        }
    });

    _savePNGButton.click(function (event) {
        if (_signaturePad.isEmpty()) {
            alert("서명을 먼저해주시기 바랍니다..");
        } else {
            var dataURL = _signaturePad.toDataURL();
            $.download(dataURL, "signature.png");
        }
    });
      
    _saveJPGButton.click(function (event) {
        if (_signaturePad.isEmpty()) {
            alert("서명을 먼저해주시기 바랍니다..");
        } else {
            var dataURL = _signaturePad.toDataURL("image/jpeg");
            $.download(dataURL, "signature.jpg");
        }
    });
      
    _saveSVGButton.click(function (event) {
        if (_signaturePad.isEmpty()) {
            alert("서명을 먼저해주시기 바랍니다..");
        } else {
            var dataURL = _signaturePad.toDataURL('image/svg+xml');
            $.download(dataURL, "signature.svg");
        }
    });

    _saveIMGButton.click(function (event) {
        if (_signaturePad.isEmpty()) {
            alert("서명을 먼저해주시기 바랍니다..");
        } else {
            var dataURL = _signaturePad.toDataURL();
            var _img = $('.img_'+_right_tp);
            _img.attr('src',dataURL);
            _img.closest('.sign-img').addClass('show');
            _signature_modal.find('.close').trigger('click');
        }
    });

    $('.btn.reset').click(function(event){
        $(this).closest('.sign-img').removeClass('show');
        $(this).closest('.sign-img').find('img').attr('src','');
    });

    var _now = Date.now();

    _signature_modal.on('show.bs.modal',function(event){
        var button = $(event.relatedTarget);
        _right_tp = button.data('whatever');

        _now = Date.now();
        $('#qrcode').attr('src','/qrcode/'+_now);
        //wrapper.style.height = _canvas.height + _signature_pad_footer.offsetHeight + 60 + 'px' ;
        _signaturePad.clear();
        clearInterval(_countdown);
        clearInterval(_signature);
        $.countDown();
        $.getSignature(_now);
    });

    $.getSignature = function(_seq){
        _signature = setInterval(function(){
            $.ajax({
                type:'get',
                dataType:'json',
                url:'/getsignature/'+_seq,
                success:function(data){
                    if(data['message']='OK' && $.trim(data['signature']) != ''){
                        var _img = $('.img_'+_right_tp);
                        _img.attr('src',data['signature']);
                        _img.closest('.sign-img').addClass('show');
                        _signature_modal.find('.close').trigger('click');
                    };
                    console.log(data);
                }
            });
        },2000);
    };

    $.countDown = function(){
        countDownDate = moment().add(60 * 5,'seconds');
        let diff = countDownDate.diff(moment());
        $('.countdown').text(moment.utc(diff).format('HH:mm:ss'));
        _countdown = setInterval(function(){
            diff = countDownDate.diff(moment());
            if(diff <=0){
                countDownDate = moment().add(60 * 5,'seconds')
                diff = countDownDate.diff(moment());
                _now = Date.now();
                $('#qrcode').attr('src','/qrcode/'+_now);   
                $.getSignature(_now);             
            };
            $('.countdown').text(moment.utc(diff).format('HH:mm:ss'));
        },1000);
    }

    _signature_modal.on('hide.bs.modal',function(event){
        clearInterval(_countdown);
        clearInterval(_signature);
    });
});