document.getElementById('noteArea').focus(); // ensures that textarea is focused when the page loads

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

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

noteArea.style.width = '98vw';
noteArea.style.height = '94vh';
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);
};

const handleMouseDown = (e) => {
    startDrawing(e);
};

const handleMouseMove = (e) => {
    if (drawing) {
        draw(e);
    }
};

const handleMouseUp = (e) => {
    if (drawing) {
        draw(e);
        drawing = false;
        saveCanvasImage();
    }
};

const handleTouchStart = (e) => {
    e.preventDefault();
    startDrawing(e.touches[0]);
};

const handleTouchMove = (e) => {
    e.preventDefault();
    if (drawing) {
        draw(e.touches[0]);
    }
};

const handleTouchEnd = (e) => {
    e.preventDefault();
    saveCanvasImage();
};

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);

canvas.addEventListener('touchstart', handleTouchStart, false);
canvas.addEventListener('touchmove', handleTouchMove, false);
canvas.addEventListener('touchend', handleTouchEnd, 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 = 'crosshair';
        canvas.focus();
        noteArea.blur();
    } else {
        // Note mode
        canvas.style.pointerEvents = 'none';
        noteArea.style.pointerEvents = 'auto';
        noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
        noteArea.style.color = 'black';
        canvas.blur();
        noteArea.focus();
    }
    localStorage.setItem('noteContents', noteArea.value);
    localStorage.setItem('noteContent', noteArea.value);
    document.getElementById('mode').innerHTML = canvas.style.pointerEvents === 'none' ? 'typing' : 'drawing';
};

const toggleButton = document.getElementById('toggle');
toggleButton.addEventListener('click', toggle);

const helpText = "This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw pictures that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either cmd + d, ctrl + d or cmd + 1, or ctrl + 1. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."

// Currently unused
// const saveTextAsFile() => {
//     const textToWrite = document.getElementById('noteArea').value;
//     const textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
//     const fileNameToSaveAs = 'notes.txt';

//     const downloadLink = document.createElement('a');
//     downloadLink.download = fileNameToSaveAs;
//     downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
//     downloadLink.style.display = 'none';
//     document.body.appendChild(downloadLink);
//     downloadLink.click();
//     document.body.removeChild(downloadLink);
// }

const handleSelectChange = () => {
    if (selectElement.value === 'clear') {
        const confirmClear = confirm('Do you really want to clear the canvas?');
        if (confirmClear) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            localStorage.removeItem('canvasImage');
        }
    } else if (selectElement.value === 'save') {
        const confirmDownload = confirm('Do you really want to save the canvas as an image?');
        if (confirmDownload) {
            const dataUrl = canvas.toDataURL();
            const a = document.createElement('a');
            a.href = dataUrl;
            a.download = 'canvas.png';
            a.click();
        }
    } else if (selectElement.value === 'help') {
        alert(helpText);
    }

    // Reset select element to default option
    selectElement.selectedIndex = 0;
};

const selectElement = document.getElementById('menu');
selectElement.addEventListener('change', handleSelectChange);

const handleKeyDown = (e) => {
    // Cmd or Ctrl and D/Cmd or Ctrl and 1 to toggle modes
    if (((e.metaKey || e.ctrlKey) && e.key === 'd') || ((e.metaKey || e.ctrlKey) && e.key === '1')) {
        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);
};

document.addEventListener('keydown', handleKeyDown);