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

const resizeCanvas = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

Notification.requestPermission().then(function (permission) {
    if (permission === 'granted') {
        console.log('Notification permission granted.');
    } else {
        console.log('Unable to get permission to notify.');
    }
});

let isRunning = false;
let intervalId = null;
// const duration = 10;
const duration = 25 * 60; // 25 minutes
let progress = 0;
let isPaused = false;

const displayText = (text) => {
    ctx.fillStyle = 'black';
    ctx.font = '30px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}

if (!isRunning && !isPaused && progress === 0) {
    displayText('Tap to start');
}

const draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = progress === duration ? '#17B169' : '#ff6347';
    ctx.fillRect(0, 0, (progress / duration) * canvas.width, canvas.height);

    if (isPaused) {
        displayText('Paused');
    } else if (progress === duration) {
        displayText('🍅');
        new Notification('Pomo', {
            body: 'Take a rest!',
            icon: 'https://eli.li/_assets/_images/pomo-tomato.png'
        });
    } else {
        const minutes = Math.floor(progress / 60);
        const seconds = ('0' + (progress % 60)).slice(-2);
        displayText(`${minutes}:${seconds}`);
    }
};

const update = () => {
    if (progress < duration) {
        progress++;
        draw();
    } else {
        clearInterval(intervalId);
        isRunning = false;
    }
};

const handleUserInteraction = () => {
    if (isRunning) {
        clearInterval(intervalId);
        isRunning = false;
        isPaused = true;
    } else {
        if (progress === duration) {
            progress = 0;
        }
        isPaused = false;
        intervalId = setInterval(update, 1000);
        isRunning = true;
    }
    draw();
};

window.addEventListener('keydown', (event) => {
    if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
        handleUserInteraction();
    }
});

window.addEventListener('click', () => {
    handleUserInteraction();
});

window.addEventListener('touchstart', () => {
    handleUserInteraction();
});