// JavaScript Document v1.3
console.log("LIBRARY: pdfLibSignature.js")
//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');
// pull the id fromthe active canvas by detecting the canvas.target 
//and pulling the canvas.id from that -- FUTURE for more than 1 canvas on same page (i.e in a modal)
//let activeCanvasId = null
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]),{passive: true});
//canvas.addEventListener('touchend', endDrawing);
//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));


/**  FUTURE CODE BLOCK TO DETECT WHICH CANVAS IS DRAWN ON. DYNAMIC DETECT CANVAS ID
 * 
 
let activeCanvasId = null; // Variable to store the ID of the active canvas
let isDrawing = false; // Flag to check if drawing is active

function startDrawing(event) {
    isDrawing = true;
    const canvas = event.target; // The canvas where the event occurred
    activeCanvasId = canvas.id; // Store the ID of the active canvas
    console.log(`Started drawing on: ${activeCanvasId}`);
}

function draw(event) {
    if (!isDrawing) return;

    const canvas = document.getElementById(activeCanvasId);
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000000';

    // Get cursor position relative to the canvas
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
}

function stopDrawing() {
    isDrawing = false;
    console.log(`Stopped drawing on: ${activeCanvasId}`);
}

// Attach event listeners to both canvases
const canvases = document.querySelectorAll('canvas');

canvases.forEach((canvas) => {
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseleave', stopDrawing); // Stop drawing if the mouse leaves the canvas

    // Support for touch events
    canvas.addEventListener('touchstart', (event) => startDrawing(event.touches[0]));
    canvas.addEventListener('touchmove', (event) => draw(event.touches[0]));
    canvas.addEventListener('touchend', stopDrawing);
});

 */