class SignatureWidget {

    constructor() {
        this.signatureDiv = document.querySelector("[data-signature]");
        this.pad = null;
        this.initEvents();
    }

    initEvents() {
        let instance = this;

        document.addEventListener("DOMContentLoaded",() => {
            let canvas = instance.signatureDiv.querySelector("canvas");
            instance.pad = new SignaturePad(canvas);
            instance.pad.addEventListener("afterUpdateStroke", () => {
                instance.signatureDiv.querySelector("[data-action=save]").disabled = false;
            });
            instance.resizeCanvas();
        });

        document.addEventListener('click', (event) => {
            if (event.target.dataset.action === 'clear') {
                instance.clear(event.target);
            }
            if (event.target.dataset.action === 'save') {
                instance.save(event.target);
            }
            if (event.target.dataset.action === 'delete') {
                instance.delete(event.target);
            }
        })
    }

    clear() {
        this.pad.clear();
        this.signatureDiv.querySelector("[data-action=save]").disabled = true;
    }

    save() {
        const dataUrl = this.pad.toDataURL();
        const base64Canvas = dataUrl.split(';base64,')[1];
        const form = this.signatureDiv.closest("form")
        form.querySelector("input[name=signature]").value = base64Canvas;
        this.signatureDiv.querySelectorAll("button[data-action]").forEach(el => el.disabled = true);
        form.submit();
    }

    delete(el) {
        let instance = this;
    }

    resizeCanvas() {
        let canvas = this.signatureDiv.querySelector("canvas");
        const ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        this.pad.clear();
    }
}