let images = [];
let imageFiles = ['Original.jpg', 'Resized_small.jpg', 'Resized_large.jpg', 'Rotated.jpg', 'Resized_width.jpg', 'BW.jpg', 'High_Contrast.jpg', 'Pixelated1.jpg', 'Pixelated2.jpg'];
const imgsize = 150;
const cellsizeX = 250, cellsizeY = 200, margin = 20;
const cols = 3, rows = 3;
let similarityText;
const textPosX = 850, textPosY = 100;


function preload() {
    for (var img of imageFiles) {
        images.push(loadImage ( '/uploads/wooh2/' + img ));
    }
}

function setup() {
    createCanvas( 1920, 1080 );

    for (var row = 0; row < rows; row++) {
        for (var col = 0; col < cols; col++) {
            var index = row * rows + col;
            if (index >= images.length) {
                break;
            }
            var img = images[index];
            img.resize(0, imgsize);

            image(img, col * cellsizeX + margin, row * cellsizeY + margin);
            textSize(16);
            text(imageFiles[index], col * cellsizeX + margin, row * cellsizeY + cellsizeY - 10);
        }
    }
    
    stroke(0);
    for (let col = 0; col <= cols; col++) {
        let x = col * cellsizeX + margin / 2;
        line(x, margin / 2, x, cellsizeY * rows + margin / 2);
    }
    for (let row = 0; row <= rows; row++) {
        let y = row * cellsizeY + margin / 2;
        line(margin / 2, y, cellsizeX * cols + margin / 2, y);
    }
    
    textSize(30);
    similarityText = createP("Click on a picture to find its similarity to the original picture.");
    similarityText.style('font-size', '20px');
    similarityText.position(textPosX, textPosY);
    
    rect(textPosX - 25, textPosY - 18, 650, 100);
}

// Reference: https://p5js.org/reference/#/p5/mouseClicked
function mouseClicked() {
    var img1 = "https://ancientbrain.com/uploads/wooh2/" + imageFiles[0];
    var img2 = "https://ancientbrain.com/uploads/wooh2/";
    var imageClicked = false;

    // Check if mouse is over any image
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            let index = row * rows + col;
            if (index >= images.length) { break; }

            let img = images[index];
            let x = col * cellsizeX + margin;
            let y = row * cellsizeY + margin;
            if (mouseX > x && mouseX < x + img.width && mouseY > y && mouseY < y + img.height) {
                // Perform actions when an image is clicked
                console.log('Image ' + index + ' clicked!');
                imageClicked = true;
                img2 += imageFiles[index];
                similarityText.html('Comparing ' + imageFiles[0] + ' and ' + imageFiles[index] + '...');
                break;
            }
        }
    }
    
    if (imageClicked) {    
        // Callback function Reference: https://dirask.com/posts/JavaScript-return-ajax-response-from-asynchronous-call-G1X001
        makeRequest(img1, img2, function(similarity) {
            similarityText.html('Similarity: ' + similarity * 100 + '%');
        });
    }
}

// API Request Reference: https://rapidapi.com/jlcdev/api/similarity2/
async function makeRequest(img1, img2, callback) {
    var data = {
        "image_a": {
            "type": "url",
            "content": img1
        },
        "image_b": {
            "type": "url",
            "content": img2
        }
    }
    
    var dataString = JSON.stringify ( data );
    
    const request = {
        async: true,
    	crossDomain: true,
    	url: 'https://similarity2.p.rapidapi.com/similarity',
    	method: 'POST',
    	headers: {
    		'content-type': 'application/json',
    		'X-RapidAPI-Key': '6a91978638msha6d15484bb38d0fp147206jsn12206b0ca611',
    		// Another key: 69fc5ad275mshbac40381c4ae8a5p1d2848jsn2e16e32352eb
    		'X-RapidAPI-Host': 'similarity2.p.rapidapi.com'
    	},
    	processData: false,
	    data: dataString,
	    // Callback function Reference: https://dirask.com/posts/JavaScript-return-ajax-response-from-asynchronous-call-G1X001
	    success: function (data) {
            callback(data.similarity);
        },
        error: function (error) {
            callback(null);
        }
    };

    $.ajax(request);
}