// JavaScript Document v1.3

//let dynamicSignatureElementId = dmx.global.data.signatureElementName // Gets the DYNAMIC ID for the canvas ID
const canvas = document.getElementById('signatureCanvas'); //  const canvas = document.getElementById('signatureCanvasIndex');
const ctx = canvas.getContext('2d');
let drawing = false;



if (canvas) {
    console.log('Canvas element found:');
} else {
    console.log('Canvas element not found');
}



function myTestFunction(variable1, variable2) {
    console.log(variable1, variable2);
    // Your logic here
}
// Get the canvas element


// Function to get the canvas offset
function getCanvasOffset() {
    const rect = canvas.getBoundingClientRect();
    //console.log("offsetX:",rect.left, " OffsetY:",rect.top)
    return {
        offsetX: rect.left,
        offsetY: rect.top
    };
}


function clearCanvas() {
    console.log("Clear Signature area")
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function startDrawing(e) {
    console.log("Start Signature Capture")
    //console.log(e)
    drawing = true;
    draw(e);
}

function endDrawing() {
    console.log("Stopped Signature Capture")
    drawing = false;
    ctx.beginPath();
}

function draw(e) {
    //console.log(e)
    if (!drawing) return;
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';

    const { offsetX, offsetY } = getCanvasOffset();
    let x = e.clientX - offsetX //canvas.offsetLeft;
    let y = e.clientY - offsetY //canvas.offsetTop;
    //console.log("X:", x, " Y:", y)

    //let x = e.clientX - canvas.offsetLeft;
    //let y = e.clientY - canvas.offsetTop;
    //console.log("X:", x, " Y:", y)
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
}


function generateRandomIdentifier(size) {

    if (size > 20) {
        let size = 20
        console.log("randomIdentifier Exceeded max len of 20. Defaults to 20 ")
    }
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let randIdentifier = '';
    for (let i = 0; i < size; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        randIdentifier += characters[randomIndex];
    }
    console.log("Random randIdentifier: ", randIdentifier);
    return randIdentifier;
}
//canvas.addEventListener('mousedown', startDrawing);
//canvas.addEventListener('mouseup', endDrawing);
//canvas.addEventListener('mousemove', draw);

// ** TOUCH EVENT LISTNERS FOR TABLETS

//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
//canvas.addEventListener('touchend', endDrawing);
//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));