import { genMap } from "./map.js"
import { startGraphicsUpdater } from "./renderer.js"
import { GameState, Vec2, ATLAS_TILE_WIDTH, Tile } from "./types.js"

const mapgen = document.getElementById("mapgen")
const sidebar = document.getElementById("sidebar")
sidebar.style.display = "none"

mapgen.onsubmit = async function(event) {
    event.preventDefault()

    const width_str = (<HTMLInputElement>document.getElementById("width")).value
    const height_str = (<HTMLInputElement>document.getElementById("height")).value

    const width = parseInt(width_str)
    const height = parseInt(height_str)

    if (!width || width < 3 || !height || height < 3) {
        alert('Invalid numbers or dimensions too small')
        return
    }

    mapgen.style.display = "none"

    runMapEditor(width, height)    
}

const startKeyListener = () => {

    let keys = {}
    
    window.addEventListener("keydown", ev => {
		if(ev.repeat) {
			return;
		}
        if (ev.code == "KeyQ") {
            if (sidebar.style.display === "none") {
                sidebar.style.display = ""
            } else {
                sidebar.style.display = "none"
            }
        }
		keys[ev.code] = true
	});

    window.addEventListener("keyup", ev => {
        if (ev.repeat) {
            return
        }
        keys[ev.code] = false
    })

    return () => {
        return keys
    }
}

const trackMouseMovement = () => {

    let pos: Vec2 = {x : 0, y: 0}

    window.addEventListener("mousemove", ev => {
        pos = {x: ev.x, y: ev.y}
    })

    return () => {
        return pos
    }
}

const getTilePos = (width: number, height: number, mousePos: Vec2): Vec2 => {

    const canvas = document.getElementById("canvas") as HTMLCanvasElement

    const canvasRect = canvas.getBoundingClientRect()
    
    let posX = mousePos.x - canvasRect.x
    let posY = mousePos.y - canvasRect.y

    let percentX = posX / canvasRect.width
    let percentY = posY / canvasRect.height

    return {
        x: Math.floor(percentX * width), 
        y: Math.floor(percentY * height)
    }

}

const checkInputs = (pressed: {[key: string]: boolean}): Tile => {
       
    if (pressed["KeyW"]) {
        return Tile.WALL
    } else if (pressed["KeyG"]) {
        return Tile.GHOST_WALL
    } else if (pressed["KeyF"]) {
        return Tile.FOOD
    } else if (pressed["Digit1"]) {
        return Tile.PLAYER_SPAWN_1
    } else if (pressed["Digit2"]) {
        return Tile.PLAYER_SPAWN_2
    } else if (pressed["Digit3"]) {
        return Tile.PLAYER_SPAWN_3
    } else if (pressed["Digit4"]) {
        return Tile.PLAYER_SPAWN_4
    } else if (pressed["KeyT"]) {
        return Tile.THICC_DOT
    } else if (pressed["KeyI"]) {
        return Tile.INITIAL_DOT
    } else if (pressed["KeyC"]) {
        return Tile.EMPTY
    }

    return undefined
}

const checkBounds = (tilePos: Vec2, width: number, height: number) => {
    if (tilePos.x < 0 || tilePos.x >= width || tilePos.y < 0 || tilePos.y >= height) return false
    return true
}

const runMapEditor = (width: number, height: number) => {

    sidebar.style.display = ""

    let data: number[] = new Array(width * height).fill(0)

    genMap(width, height, data, Tile.EMPTY)

    let state: GameState = {
        started: true,
        input: {},
        players: {},
        items: {},
        mapId: 0
    }

    let frame = 0
    const updateGraphics = startGraphicsUpdater()
    const getInput = startKeyListener()
    const getMousePos = trackMouseMovement()

    const loop = () => {

        const mousePos = getMousePos()
        const tilePos = getTilePos(width, height, mousePos)

        const pressed = getInput()
        const tile = checkInputs(pressed)

        if (tile !== undefined && checkBounds(tilePos, width, height)) {
            let current = data[tilePos.y * width + tilePos.x];
            if (current != tile) {
                data[tilePos.y * width + tilePos.x] = tile
                genMap(width, height, data, 0)
            }
        }

        updateGraphics(state, frame, true)

        requestAnimationFrame(loop)
    }

    requestAnimationFrame(loop)

}