import { Game } from "./net/game.js";
import { InitialState, onLogic } from "./logic/logic.js";
import { startGraphicsUpdater } from "./renderer.js";
import { GameKeyMap, Frame, Key, Player, GAME_MAP_COUNT, Vec2 } from "./types.js";
import { checkMap, decompressMap, genMap } from "./map.js";

const join = document.getElementById("join")
const lobby = document.getElementById("lobby")
const mapeditor = document.getElementById("mapeditor")

const maps = {
    [0]: 'EwRgPqYgNDew+TEuW6AGT2u59mPI/PeLZclSys1AhSgThJcJb2bdq7p5rupV2DYaVFCKI9HwFDiWACyxyK5WpCqArOPSCeuqfUnzDwaGbMyT3FAGZT0ABznD9ybWv0LLq61kz4S0M9WRMANnVVDUi1AHYdQxt+dyNEhJNiNk8A3npkiVSmcUEM6E5C/wL86rlivLqxaVymltggA='
}

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

    const room_code = (<HTMLInputElement>document.getElementById("room_code")).value
    const player_name = (<HTMLInputElement>document.getElementById("player_name")).value

    if (room_code == '') {
        alert('Please enter a room code')
        return
    }

    if (player_name == '') {
        alert('Please enter a player name')
        return
    }

    for (let mapId = 0; mapId < GAME_MAP_COUNT; mapId++) {
        let {width, height, data} = decompressMap(maps[0]) // for now
        let map = genMap(width, height, data, mapId)
        let [success, result] = checkMap(map)

        if (!success) {
            alert(result)
            return
        }

        map.spawns = result as Vec2[]

    }

    startGame(room_code, player_name)
}

mapeditor.onclick = function() {
    window.location.href = 'mapeditor.html'
}

const updateGraphics = startGraphicsUpdater()

const onLoad = (startData: Frame) => {

    if (startData.data.started) {
        alert('Room has already started')
        return false
    }

    let players = Object.values(startData.data.players).filter((p: Player): boolean => p !== null && p.name !== undefined)
    if (players.length >= 4) {
        alert('Room is full')
        return false
    }

    join.style.display = "none"
    mapeditor.style.display = "none"
    lobby.style.display = ""

    return true
}

const onFrame = (data: Frame, frame: number) => {
    
	updateGraphics(data ? data.data : InitialState, frame);

}

const startGame = (code: string, name: string) => {

    const game = new Game(3000)

    game.start(
        code,
        GameKeyMap,        
        onLoad,
        onFrame,
        onLogic,
        {
            start: false,
            key: Key.NOTHING,
            name
        }
    )

}