/*
Samuel Russell
Captured Sun
12.29.2025
*/

class Canvas {
    STROKE_COLOR = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim();
    c = document.createElement("canvas")
    ctx;

    /* -----------------------------
    Camera
    ----------------------------- */
    camera = {
        x: 0,
        y: 0,
        scale: 1,
        ZOOM_SPEED: 0.016,
        PAN_SPEED: 1.5,
        FOCUS_THRESHOLD: 4.0
    }

    /* -----------------------------
    Rectangle
    ----------------------------- */
    rects = [];

    resize = () => {
        // Make Canvas Fill Screen
        this.c.style.width = window.innerWidth + "px";
        this.c.style.height = window.innerHeight + "px";

        // Set Internal Render Size by DPR
        const dpr = window.devicePixelRatio || 1;
        this.c.width = window.innerWidth * dpr;
        this.c.height = window.innerHeight * dpr;
        this.ctx.scale(dpr, dpr);
    }

    onWheel = (e) => {
        e.preventDefault();
        let camera = this.camera

        const rectCanvas = this.c.getBoundingClientRect();
        const mouseX = e.clientX - rectCanvas.left;
        const mouseY = e.clientY - rectCanvas.top;

        if (!e.ctrlKey) {
            const dpr = window.devicePixelRatio || 1;

            // Two-finger pan in world coordinates
            camera.x += (e.deltaX * dpr) * camera.PAN_SPEED / camera.scale;
            camera.y += (e.deltaY * dpr) * camera.PAN_SPEED / camera.scale;
            return;
        }

        const dpr = window.devicePixelRatio || 1;

        const worldX = (
            mouseX - 
            (this.c.width / dpr) / 2 // X coordinate of canvas center in CSS pixels
        ) // Mouse offset from canvas center in CSS pixels
        / camera.scale  // Account for Zoom: shift by camera's zoom position
        + camera.x;     // Account for Pan: shift by camera’s world X position

        const worldY = (
            mouseY - 
            (this.c.height / dpr) / 2
        )
        / camera.scale
        + camera.y;

        // Apply zoom
        const zoomFactor = Math.exp(-e.deltaY * camera.ZOOM_SPEED);
        camera.scale *= zoomFactor;
        camera.scale = Math.max(0.04, Math.min(10, camera.scale));

        // Adjust camera to keep cursor fixed
        camera.x = worldX - (mouseX - (this.c.width / dpr) / 2) / camera.scale;
        camera.y = worldY - (mouseY - (this.c.height / dpr) / 2) / camera.scale;
    }

    draw = () => {
        let ctx = this.ctx
        let rect = this.rect
        let camera = this.camera
        let scale = camera.scale
        requestAnimationFrame(this.draw);

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, this.c.width, this.c.height);

        let drawMenus = () => {
            ctx.fillStyle = "#FEB279";
            ctx.strokeRect(20,20,220,100);

            ctx.fillStyle = "#000";
            ctx.font = "60px arial";
            // ctx.fillText("Button 1", 20, 100);
        }

        let drawSpaces = () => {
            for(let i=0; i<this.rects.length; i++) {
                let rect = this.rects[i]

                let x = -300 + i
                let y = -200 + i
                let w = 600 + i
                let h = 400 + i

                ctx.translate(this.c.width / 2, this.c.height / 2);
                ctx.scale(scale, scale);
                ctx.translate(-camera.x, -camera.y);
    
                ctx.strokeStyle = this.STROKE_COLOR;
                ctx.lineWidth = 0.5 / scale;
                ctx.strokeRect(x, y, w, h);
            }
        }

        ctx.save()

        drawSpaces()

        ctx.restore()

        drawMenus(ctx);
    }

    async fetchDownloads() {
        let res = await fetch("/downloads", {method: "GET"})
        console.log(res)
        let json = await res.json()
        console.log(json)
        this.rects = json
    }

    constructor() {
        document.body.appendChild(this.c)
        this.ctx = this.c.getContext("2d");

        window.addEventListener("resize", this.resize);
        this.resize();

        this.c.addEventListener("wheel", this.onWheel, { passive: false });
        this.draw()

        this.fetchDownloads()
    }
}

new Canvas()