document.addEventListener("DOMContentLoaded", function() {
    const canvas = document.getElementById("bannerCanvas");
    canvas.width = wavypointBannerData.width;
    canvas.height = wavypointBannerData.height;

    console.log("wavypointBannerData:", wavypointBannerData); 

    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.crossOrigin = "anonymous"; 
    img.src = wavypointBannerData.img;

    img.onload = function() {
        renderCanvas();
    };

    img.onerror = function() {
        console.error("Image failed to load:", img.src);
    };
    
    function renderCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // Example text positions
        const inputs = document.querySelectorAll(".banner-input");
        const fontSize = document.querySelectorAll(".banner-fontsize");
        const fontColor = document.querySelectorAll(".banner-fontcolor");
        const fontFamily = document.querySelectorAll(".banner-fontfamily");

        if (inputs.length > 0) {

            ctx.save(); 
            ctx.translate( canvas.width / 2, 120 );   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font =  fontSize[0].value + "px " + fontFamily[0].value;
            ctx.fillStyle = fontColor[0].value;
            ctx.textAlign = "center";
            ctx.fillText(inputs[0].value, 0, 0);   
            ctx.restore(); 

        }
        if (inputs.length > 1) {

            ctx.save(); 
            ctx.translate( canvas.width / 2, 200);   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font = "bold " + fontSize[1].value + "px " + fontFamily[1].value;
            ctx.fillStyle = fontColor[1].value;
            ctx.textAlign = "center";
            ctx.fillText(inputs[1].value, 0, 0);   
            ctx.restore(); 

        }
        if (inputs.length > 2) {

            ctx.save(); 
            ctx.translate( canvas.width / 2, 330);   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font = "bold " + fontSize[2].value + "px " + fontFamily[2].value;
            ctx.fillStyle = fontColor[2].value;
            ctx.textAlign = "center";
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // color and transparency of shadow
            ctx.shadowOffsetX = 4; // horizontal distance of shadow
            ctx.shadowOffsetY = 4; // vertical distance of shadow
            ctx.shadowBlur = 8; // blur radius for softer edges
            ctx.fillText(inputs[2].value, 0, 0);   
            ctx.restore(); 

        }

         if (inputs.length > 3) {

            ctx.save(); 
            ctx.translate( 380, 392);   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font = "bold " +fontSize[3].value + "px " + fontFamily[3].value;
            ctx.fillStyle = fontColor[3].value;
            ctx.textAlign = "center";
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // color and transparency of shadow
            ctx.shadowOffsetX = 4; // horizontal distance of shadow
            ctx.shadowOffsetY = 4; // vertical distance of shadow
            ctx.shadowBlur = 8; // blur radius for softer edges
            ctx.fillText(inputs[3].value, 0, 0);   
            ctx.restore(); 

        }

         if (inputs.length > 4) {

            ctx.save(); 
            ctx.translate( 150, 260 );   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font = fontSize[4].value + "px " + fontFamily[4].value;
            ctx.fillStyle = fontColor[4].value;
            ctx.textAlign = "center";
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // color and transparency of shadow
            ctx.shadowOffsetX = 4; // horizontal distance of shadow
            ctx.shadowOffsetY = 4; // vertical distance of shadow
            ctx.shadowBlur = 8; // blur radius for softer edges
            ctx.fillText(inputs[4].value, 0, 0);   
            ctx.restore(); 

        }

         if (inputs.length > 5) {

            ctx.save(); 
            ctx.translate( 150, 300);   
            ctx.rotate(-7 * Math.PI / 180); 
            ctx.font = fontSize[5].value + "px " + fontFamily[5].value;
            ctx.fillStyle = fontColor[5].value;
            ctx.textAlign = "center";
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // color and transparency of shadow
            ctx.shadowOffsetX = 4; // horizontal distance of shadow
            ctx.shadowOffsetY = 4; // vertical distance of shadow
            ctx.shadowBlur = 8; // blur radius for softer edges
            ctx.fillText(inputs[5].value, 0, 0);   
            ctx.restore(); 

        }

        
       
    }

    document.querySelectorAll(".banner-input, .banner-fontsize, .banner-fontcolor, .banner-fontfamily").forEach(input => {
        input.addEventListener("input", renderCanvas);
    });

    document.getElementById("downloadBanner").addEventListener("click", function() {
        const link = document.createElement("a");
        link.download = "custom-banner.png";
        link.href = canvas.toDataURL("image/png");
        link.click();
    });
});
