// Get the viewport's width and height
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

// Select the existing canvas element
const canvas = document.getElementById('toad'); // replace 'your-canvas-id' with the id of your canvas

// Set the canvas's width and height to the viewport's width and height
canvas.width = viewportWidth;
canvas.height = viewportHeight;

// Get the canvas's context
const context = canvas.getContext('2d');

// Set the canvas's background color to grey
context.fillStyle = '#f0f0f0';
context.fillRect(0, 0, canvas.width, canvas.height);

// Draw a grid of white lines on the canvas
const gridSize = 50; // Change this value to change the size of the grid cells
context.strokeStyle = 'white';

const drawLine = (x1, y1, x2, y2) => {
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
};

for (let x = 0; x <= viewportWidth; x += gridSize) {
    drawLine(x, 0, x, viewportHeight);
}

for (let y = 0; y <= viewportHeight; y += gridSize) {
    drawLine(0, y, viewportWidth, y);
}

// Create a custom context menu
const contextMenu = document.createElement('ul');
contextMenu.id = 'context-menu';
contextMenu.style.display = 'none';
contextMenu.style.position = 'fixed';
contextMenu.style.listStyle = 'none';
contextMenu.style.padding = '10px';
contextMenu.style.backgroundColor = 'white';
contextMenu.style.border = '1px solid black';

const drawShape = (shape, x, y) => {
    context.beginPath();
    context.strokeStyle = '#2d2d2d'; // Change this to the color you want
    context.fillStyle = '#2d2d2d'; // Change this to the color you want
    if (shape === 'square') {
        context.rect(x, y, gridSize, gridSize);
        context.fill(); // Fill the square shape
    } else if (shape === 'triangle') {
        context.moveTo(x, y);
        context.lineTo(x + gridSize, y);
        context.lineTo(x + gridSize / 2, y + gridSize);
        context.closePath();
        context.fill(); // Fill the triangle shape
    } else if (shape === 'circle') {
        context.arc(x + gridSize / 2, y + gridSize / 2, gridSize / 2, 0, 2 * Math.PI);
        context.fill(); // Fill the circle shape
    }
    context.stroke();
    shapes.push({ type: shape, x, y, color: '#2d2d2d' });
};

['Square', 'Triangle', 'Circle'].forEach(shape => {
    const option = document.createElement('li');
    option.textContent = shape;
    option.style.cursor = 'pointer'; // Add this line
    option.addEventListener('click', (event) => {
        contextMenu.style.display = 'none';
        const cellX = Math.floor(lastRightClick.x / gridSize) * gridSize;
        const cellY = Math.floor(lastRightClick.y / gridSize) * gridSize;
        drawShape(shape.toLowerCase(), cellX, cellY);
    });
    contextMenu.appendChild(option);
});

document.body.appendChild(contextMenu);

// Store the last right click position
let lastRightClick = { x: 0, y: 0 };

// Add an event listener for the 'contextmenu' event on the canvas
canvas.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    lastRightClick = { x: event.clientX, y: event.clientY };
    contextMenu.style.display = 'block';
    contextMenu.style.left = `${event.clientX}px`;
    contextMenu.style.top = `${event.clientY}px`;
});

let shapes = [];

// Hide the context menu when clicking anywhere else
window.addEventListener('click', () => {
    contextMenu.style.display = 'none';
});