class SignatureHandler {
  renderCanvas() {
    if (this.drawing) {
      this.canvasCtx.moveTo(this.lastPos.x, this.lastPos.y);
      this.canvasCtx.lineTo(this.mousePos.x, this.mousePos.y);
      this.canvasCtx.stroke();
      this.lastPos = this.mousePos;
    }
  } 

  clearCanvas() {
    this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.canvasCtx.beginPath();
    
    this.drawing = false;
    
    this.lastPos = {
      x: 0,
      y: 0
    };

    this.mousePos = {
      x: 0,
      y: 0
    };

    var sigText = document.getElementById(this.dataUrlId);
    sigText.value = '';
  }

  drawLoop() {
    requestAnimFrame(this.drawLoop.bind(this));
    this.renderCanvas();
  }

  canvasToInput() {
    const blankCanvas = document.createElement('canvas');
    blankCanvas.width = this.canvas.width;
    blankCanvas.height = this.canvas.height;
    if (this.canvas.toDataURL() !== blankCanvas.toDataURL()) {
      var sigText = document.getElementById(this.dataUrlId);
      sigText.value = this.canvas.toDataURL();
    }
  }

  getPos(event) {
    var rect = this.canvas.getBoundingClientRect();
    
    if (event.type.startsWith('touch')) {
      return {
        x: event.touches[0].clientX - rect.left,
        y: event.touches[0].clientY - rect.top
      }
    }
    
    return {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    } 
  }
  
  onStartDrawing(event) {
    this.drawing = true;
    this.lastPos = this.getPos(event);
  }

  onStopDrawing(event) {
    this.drawing = false;
    this.canvasToInput();
  }

  onDrawing(event) {
    this.mousePos = this.getPos(event);
  }

  onBodyCanvas(event) {
    if (event.target == this.canvas) {
      event.preventDefault();
    }
  }

  onClearCanvas(event) {
    this.clearCanvas();
  }

  constructor(canvasId, dataUrlId, clearBtnId) {
    this.canvasId = canvasId;
    this.dataUrlId = dataUrlId;
    this.clearBtnId = clearBtnId

    this.canvas = document.getElementById(this.canvasId);
    this.canvasCtx = this.canvas.getContext("2d");
    this.canvasCtx.strokeStyle = "#222222";
    this.canvasCtx.lineWidth = 4;

    this.canvas.addEventListener("mousedown", this.onStartDrawing.bind(this));
  
    this.canvas.addEventListener("mouseup", this.onStopDrawing.bind(this));
  
    this.canvas.addEventListener("mousemove", this.onDrawing.bind(this));
  

    this.canvas.addEventListener("mouseleave", this.onStopDrawing.bind(this));
  
  
    this.canvas.addEventListener("touchstart", this.onStartDrawing.bind(this));

  
    this.canvas.addEventListener("touchend", this.onStopDrawing.bind(this));

    this.canvas.addEventListener("touchmove", this.onDrawing.bind(this));
  
    // Prevent scrolling when touching the canvas
    document.body.addEventListener("touchstart", this.onBodyCanvas.bind(this));
  
    document.body.addEventListener("touchend", this.onBodyCanvas.bind(this));
     
    document.body.addEventListener("touchmove", this.onBodyCanvas.bind(this));
    
    // Set up the UI
    var clearBtn = document.getElementById(this.clearBtnId);
    clearBtn.addEventListener("click", this.onClearCanvas.bind(this));
    
    this.clearCanvas();

    this.drawLoop();

  }
}

jQuery( function( $ ) {  
	if ($('input[name="permitlsp"]').length) {

    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    signature = new SignatureHandler('sig-canvas', 'sig-dataUrl', 'sig-clear'); 
    signature_sec = new SignatureHandler('sigsec-canvas', 'sigsec-dataUrl', 'sigsec-clear'); 
       
		$("#sigBlock").hide();
		$("#sigsecBlock").hide();

		$('input[name="permitlsp"]').on('change', function() { 
			if ($(this).val() == 'Ja') {
				$("#sigBlock").show();
        if ($('input[name="sig-dataUrl_required"]').val() == '1') {
          $('#sigBlock').find('input[name="sig-dataUrl"]').attr( { "aria-required":"true", "data-rule-required":"true" } );
          $('#sigBlock').find('input[name="sig-dataUrl"]').addClass('validated_hiddens');
          $('#sigBlock').find('#sigLegend').html("<h3>Handtekening<span aria-hidden=\"true\"> *</span></h3>");
        }
        
        if (isMinorPatient()) {
          $("#sigsecBlock").show();
          $('#sigsecBlock').find('input[name="sigsec-dataUrl"]').attr( { "aria-required":"true", "data-rule-checksigsec":"true" } );
          $('#sigsecBlock').find('input[name="sigsec-dataUrl"]').addClass('validated_hiddens');
          $('#sigsecBlock').find('#sigsecLegend').html("<h3>Handtekening ouders/voogd<span aria-hidden=\"true\"> *</span></h3>");
       }
 			}
			else {
        signature.clearCanvas();
        $('#sigBlock').find('#sigLegend').html("<h3>Handtekening</h3>");
        $('#sigBlock').find('input[name="sig-dataUrl"]').removeAttr("aria-required data-rule-required");
        $('#sigBlock').find('input[name="sig-dataUrl"]').removeClass('validated_hiddens');
        $("#sigBlock").hide();

        signature_sec.clearCanvas();
        $('#sigsecBlock').find('#sigsecLegend').html("<h3>Handtekening ouders/voogd</h3>");
        $('#sigsecBlock').find('input[name="sigsec-dataUrl"]').removeAttr("aria-required data-rule-checksigsec");
        $('#sigsecBlock').find('input[name="sigsec-dataUrl"]').removeClass('validated_hiddens');
        $("#sigsecBlock").hide();
			}
		});
	}
});