import { Glitcher } from "./lib/glitcher";

const CANVAS = document.getElementById("ui-canvas")
const UI_GLITCHER = new Glitcher(CANVAS)
const FORM = document.getElementById("glitcher-form")

async function updateFromForm(){
    let data = new FormData(FORM)
    
    let image = data.get("image")
    if(image.size > 0){
        await UI_GLITCHER.setImage(image)
        UI_GLITCHER.clearGlitch()
    } else {
        UI_GLITCHER.clearImage()
    }

    UI_GLITCHER.render()
}

for(let el of FORM.elements){
    el.addEventListener("change", () => FORM.requestSubmit())
}

FORM.addEventListener("submit", e => {
        e.preventDefault()
        updateFromForm()
    })

CANVAS.addEventListener("pointerdown", e => {
    let pointerId = e.pointerId;

    let lastX = undefined;
    let lastY = undefined;
    let lastCommit = null;

    function applyGlitch(e){
        if(e.pointerId != pointerId){
            return
        }

        let canvasRect = CANVAS.getBoundingClientRect()
        let x = e.clientX - canvasRect.left
        let y = e.clientY - canvasRect.top

        let now = Date.now()

        if(lastCommit === null || now - lastCommit > 100){
            let width = 20;
            if(e.pointerType == "touch"){
                width *= 2
            }
            
            let deltaX = lastX !== undefined ? x - lastX : 0
            let deltaY = lastY !== undefined ? y - lastY : 0

            width += Math.max(Math.abs(deltaX), Math.abs(deltaY))

            //UI_GLITCHER.addGlitch(x + (Math.random() * width) - width/2, y + (Math.random() * width) - width/2, width)
            UI_GLITCHER.addGlitch(x, y, width)
            UI_GLITCHER.render()

            lastCommit = now
        }

        lastX = x
        lastY = y
    }

    function endGlitch(e){
        if(e.pointerId != pointerId){
            return
        }

        window.removeEventListener("pointermove", applyGlitch)
        window.removeEventListener("pointerup", endGlitch)
    }

    window.addEventListener("pointerup", endGlitch)
    window.addEventListener("pointermove", applyGlitch)

    applyGlitch(e)
})


updateFromForm()