/**
 * Um die Signature-Pads verwenden zu können
 */
document.addEventListener('DOMContentLoaded', () => {
  /** @type {HTMLDivElement} */
  const wrapper = document.getElementById('signature-pad');
  /** @type {HTMLButtonElement} */
  const btnClear = wrapper.querySelector('#signature-pad-button-clear');
  /** @type {HTMLButtonElement} */
  const btnUndo = wrapper.querySelector('#signature-pad-button-undo');
  /** @type {HTMLCanvasElement} */
  const canvas = wrapper.querySelector('canvas');

  const signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)'
  });

  function resizeCanvas() {
    //canvas.getContext("2d").scale(2, 2);
    signaturePad.clear();
  }

  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  btnClear.addEventListener('click', _ => {
    signaturePad.clear();
  });
  btnClear.disabled = false;

  btnUndo.addEventListener('click', _ => {
    const data = signaturePad.toData();
    if (data) {
      data.pop();
      signaturePad.fromData(data);
    }
  })
  btnUndo.disabled = false;
});