var openHelp = document.getElementById("helpButton");
openHelp.onclick = function() {
    Swal.fire({
        title: 'Οδηγίες',
        html: `Συμπληρώνουμε την Κύπρο σέρνοντας τις επαρχίες που ζητούνται κάθε φορά στην σωστή τους θέση.`,
        showConfirmButton: false,
        showCloseButton: true,
        heightAuto: false
    })
}


const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

ctx.canvas.width = 2524;
ctx.canvas.height = 2500;



const backgroundImage = new Image();
backgroundImage.src = 'assets/cyprus.jpg'; 

// List of images and their initial positions
const images = [
    { name: 'ammohostos', src: 'assets/ammohostos.png', x: -121, y: 1387, correctX: 1283  , correctY: 20 , locked: false, question:"της Κερύνιας"},
    { name: 'kerinia', src: 'assets/kerinia.png', x: 21  , y: 2282, correctX: 768 , correctY: 400 , locked: false , question:"της Λάρνακας"},
    { name: 'larnaka', src: 'assets/larnaka.png', x: 1573  , y: 2026, correctX: 823  , correctY: 758 , locked: false , question:"της Λευκωσίας"},
    { name: 'lefkosia', src: 'assets/lefkosia.png', x: 1475  , y: 1473, correctX: 417  , correctY: 547 , locked: false , question:"της Λεμεσού"},
    { name: 'Lemesos', src: 'assets/Lemesos.png', x: 870   , y: 1992, correctX: 487  , correctY: 897 , locked: false , question:"της Πάφου"},
    { name: 'pafos', src: 'assets/pafos.png', x: 987  , y: 1463, correctX: 108  , correctY: 692 , locked: false , question:""}

];
let currentImage = 0;

// Load  images
images.forEach(img => {
    img.image = new Image();
    img.image.src = img.src;
    img.initialX = img.x;
    img.initialY = img.y;
});

let selectedImg = null;
let offsetX = 0;
let offsetY = 0;
let score = 0;
const tolerance = 100; // Tolerance in pixels for correct placement

// Draw the game
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the map
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

    images.forEach(img => {
        ctx.drawImage(img.image, img.x, img.y);

    });
}

// Check if img is in the correct position
function checkPlacement(img) {
    const isCorrect = Math.abs(img.x - img.correctX) <= tolerance &&
                      Math.abs(img.y - img.correctY) <= tolerance;

    
    if (isCorrect && images[currentImage].name==img.name) {
        img.x = img.correctX;
        img.y = img.correctY;
        img.locked = true;  // Lock the img if correctly placed
        score++;
        document.getElementById("count").textContent = img.question;
        currentImage++;
    }
    else{
        return false;
        //console.log(Math.round(img.x), Math.round(img.y));
    }
    

    if(score == images.length){
        document.getElementById("question").textContent = "Ολοκλήρωση!";
    }
    return isCorrect;
}

// Handle mouse down event
canvas.addEventListener('pointerdown', (e) => {
    let ratio = canvas.offsetWidth / canvas.width;
    const mouseX = e.offsetX/ratio;
    const mouseY = e.offsetY/ratio;


    selectedImg = images.find(img => {
        if (img.locked) return false; 
        const withinX = mouseX >= img.x && mouseX <= img.x + img.image.width;
        const withinY = mouseY >= img.y && mouseY <= img.y + img.image.height;
        return withinX && withinY;
    });
    if (selectedImg) {
        offsetX = mouseX - selectedImg.x;
        offsetY = mouseY - selectedImg.y;
    }
});

// Handle mouse move event
canvas.addEventListener('pointermove', (e) => {
    let ratio = canvas.offsetWidth / canvas.width;
    if (selectedImg) {
        selectedImg.x = e.offsetX/ratio - offsetX;
        selectedImg.y = e.offsetY/ratio - offsetY;
        draw();
    }
});

//Handle mouse up event
canvas.addEventListener('pointerup', () => {
    if (selectedImg) {
        // Check placement and either snap to the correct position or revert
        if (!checkPlacement(selectedImg)) {
            selectedImg.x = selectedImg.initialX;
            selectedImg.y = selectedImg.initialY;
        }
        selectedImg = null;
        draw();


    }
});

// Initial draw when everything is loaded
backgroundImage.onload = () => {
    images.forEach(img => {
        img.image.onload = draw;
    });
};

draw();