const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let storedText = localStorage.getItem('text') || 'Text to Image';
let storedTextColor = localStorage.getItem('textColor') || '#7FF9CC';
let storedTextSize = localStorage.getItem('textSize') || '5';
let storedBgColor = localStorage.getItem('bgColor') || '#5A24B2';
let storedImageLink = localStorage.getItem('canvasImage') || '';
// $('input[name="words"]').val(storedText);
$('.page ul li.selected p').text(storedText);
$('.change-color').val(storedTextColor);
$('.change-size').val(storedTextSize);
$('.change-bg-color').val(storedBgColor);
$('.image-link').val(storedImageLink);
$(document).ready(function() {
    $(".tti-w").on("submit", function(e) {
        e.preventDefault();
        updateCanvas($('.page ul li.selected p').text());
        localStorage.setItem('text', storedText);
        localStorage.setItem('textColor', storedTextColor);
        localStorage.setItem('textSize', storedTextSize);
        localStorage.setItem('bgColor', storedBgColor);
        localStorage.setItem('canvasImage', canvas.toDataURL());
    });
    $(".tti-reset").on("click", function() {
        $(".tti-w").on("submit", function(e) {
            e.preventDefault();
            this.reset();
            localStorage.setItem('text', 'Text to Image');
            localStorage.setItem('textColor', '#7FF9CC');
            localStorage.setItem('textSize', 5);
            localStorage.setItem('bgColor', '#5A24B2');
            // localStorage.setItem('canvasImage', canvas.toDataURL());
            localStorage.setItem('selectedItem', 'FontsGenerator_Top');
            localStorage.setItem('pickText', 'Default Text');
            $('.pick-text li').removeClass('selected');
            $('.pick-text li.default').addClass('selected');
            $('#d-btn').text('Default Text');
        });
        $('.qg button.cg').click();
        window.location.reload();
    });
    $(".change-color").on("change", function() {
        storedTextColor = $(this).val();
        updateCanvas($('.page ul li.selected p').text());
        localStorage.setItem('textColor', storedTextColor);
    });

    $(".change-size").on("change", function() {
        storedTextSize = $(this).val();
        updateCanvas($('.page ul li.selected p').text());
        localStorage.setItem('textSize', storedTextSize);
    });

    $(".change-bg-color").on("change", function() {
        storedBgColor = $(this).val();
        updateCanvas($('.page ul li.selected p').text());
        localStorage.setItem('bgColor', storedBgColor);
    });

    $(".image-link").on("change", function() {
        storedImageLink = $(this).val();
        localStorage.setItem('imageLink', storedImageLink);
        drawImageFromLink(storedImageLink);
    });
});

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';
    var lines = [];
    var currentY = y;
    for (var i = 0; i < words.length; i++) {
        var testLine = line + words[i] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && i > 0) {
            lines.push({
                text: line.trim(),
                y: currentY
            });
            line = words[i] + ' ';
            currentY += lineHeight;
        } else {
            line = testLine;
        }
    }
    lines.push({
        text: line.trim(),
        y: currentY
    });
    for (var j = 0; j < lines.length; j++) {
        context.fillText(lines[j].text, x, lines[j].y);
    }
    return (lines.length - 1) * lineHeight;
}

function updateCanvas(text) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = storedBgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = storedTextColor;
    ctx.font = storedTextSize + "rem system-ui";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    let lineHeightCalc = storedTextSize * 2 * 10 - 10;
    var maxWidth = canvas.width - 40;
    var lineHeight = lineHeightCalc;
    var textHeight = wrapText(ctx, text, canvas.width / 0, 0, maxWidth, lineHeight);
    var adjustedY = (canvas.height - textHeight) / 2;
    wrapText(ctx, text, canvas.width / 2, adjustedY, maxWidth, lineHeight);
    $('.image-link').val(canvas.toDataURL());
}

function drawImageFromLink(imageLink) {
    const img = new Image();
    img.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        localStorage.setItem('canvasImage', canvas.toDataURL());
    };
    img.src = imageLink;
}
$(document).ready(function() {
    var selectedItemId = localStorage.getItem('selectedItem');
    if (selectedItemId) {
        $('.pick-text li').removeClass('selected');
        $('#' + selectedItemId).addClass('select');
        $('#' + selectedItemId).parent().addClass('selected');
    }
    $('.pick-text li').click(function() {
        $('.pick-text li').removeClass('selected');
        $(this).addClass('selected');
        var selectedId = $(this).find('.p-text').attr('id');
        let pickTxt = $('.pick-text li.selected').find('.__name').text();
        $('#d-btn').text(pickTxt);
        localStorage.setItem('selectedItem', selectedId);
        localStorage.setItem('pickText', pickTxt);
        $("#d-btn").click();
    });
    var storedPickTxt = localStorage.getItem('pickText') || 'Default Text';
    if (storedPickTxt) {
        $('#d-btn').text(storedPickTxt);
    }
    $('#d-btn').click(function() {
        $('.appPage').toggle();
    });
    setTimeout(function gurenge() {
        $("#t-result").trigger('click')
    }, 2000);
    $(".download-image").on("click", function() {
        const canvasImage = localStorage.getItem('canvasImage');
        if (canvasImage) {
            const downloadLink = document.createElement('a');
            downloadLink.href = canvasImage;
            downloadLink.download = 'generated_image.png';
            downloadLink.click();
        } else {
            alert('Please generate an image first.');
        }
    });
});