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

const noteArea = document.getElementById('noteArea');
noteArea.value = localStorage.getItem('noteContent') || '';

noteArea.style.width = '100vw';
noteArea.style.height = '100vh';
noteArea.style.boxSizing = 'border-box';
noteArea.style.position = 'absolute';
noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
noteArea.style.zIndex = '1';

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.zIndex = '0';

let drawing = false;
let prevX = 0;
let prevY = 0;

canvas.style.pointerEvents = 'none';

const getCursorPosition = (e) => {
    const rect = canvas.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
};

const startDrawing = (e) => {
    drawing = true;
    const { x, y } = getCursorPosition(e);
    prevX = x;
    prevY = y;
};

const drawLine = (x1, y1, x2, y2) => {
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
};

const draw = (e) => {
    if (drawing) {
        const { x, y } = getCursorPosition(e);
        drawLine(prevX, prevY, x, y);
        prevX = x;
        prevY = y;
    }
};

const saveCanvasImage = () => {
    const dataUrl = canvas.toDataURL();
    localStorage.setItem('canvasImage', dataUrl);
};

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', (e) => {
    if (drawing) {
        draw(e);
    }
});
canvas.addEventListener('mouseup', (e) => {
    if (drawing) {
        draw(e);
        drawing = false;
        saveCanvasImage();
    }
});

canvas.addEventListener('touchstart', function(e) {
    e.preventDefault();
    startDrawing(e.touches[0]);
}, false);

canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    if (drawing) {
        draw(e.touches[0]);
    }
}, false);

canvas.addEventListener('touchend', function(e) {
    e.preventDefault();
    stopDrawing();
}, false);

const savedImage = localStorage.getItem('canvasImage');
if (savedImage) {
    const img = new Image();
    img.onload = () => {
        ctx.drawImage(img, 0, 0);
    };
    img.src = savedImage;
}

// Toggle between drawing and note mode
const toggle = () => {
    if (canvas.style.pointerEvents === 'none') {
        // Drawing mode
        canvas.style.pointerEvents = 'auto';
        noteArea.style.pointerEvents = 'none';
        noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
        noteArea.style.color = '#bbb';
        canvas.style.cursor = 'pointer';
        toggleButton.textContent = 'Write'
    } else {
        // Note mode
        canvas.style.pointerEvents = 'none';
        noteArea.style.pointerEvents = 'auto';
        noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
        noteArea.style.color = 'black';
        toggleButton.textContent = 'Draw'
    }
};

/*
const toggleButton = document.getElementById('toggleButton');
toggleButton.style.pointerEvents = 'auto';
toggleButton.addEventListener('click', toggleMode);
toggleButton.addEventListener('touchend', toggleMode);

function toggleMode() {
    toggle();
}
*/


document.addEventListener('keydown', (e) => {
    // Cmd or Ctrl and D key to toggle modes
    if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
        e.preventDefault();
        toggle();
    }

    // C key to clear the canvas
    if (e.key === 'c' && canvas.style.pointerEvents === 'auto') {
        const confirmClear = confirm('Do you really want to clear the canvas?');
        if (confirmClear) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            localStorage.removeItem('canvasImage');
        }
    }

    // S key to save the canvas as an image
    if (e.key === 's' && canvas.style.pointerEvents === 'auto') {
        const dataUrl = canvas.toDataURL();
        const a = document.createElement('a');
        a.href = dataUrl;
        a.download = 'canvas.png';
        a.click();
    }

    localStorage.setItem('noteContent', noteArea.value);
});