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 custommaps = document.getElementById("custommaps")
const popup = document.getElementById("popup")

const defaultMaps = {
    [0]: 'MwRgPgTOIDS/dEOU1L1sxgDDX+9CDijSTyzLcFrVabN7EnYXCUnaBOK31xCMyEUSPfg3FZ20trTlTJnPpX4iV6tRLpCOC7bslbVvNQBY41SxesBWE/bYHpTnFPkZjFResG/hpb003RGBEMR0YQQAOSIjYcNDDRntAgNi/Txl/L2CkozgXfWdgtTUANmsQKyrrAHYHFLiI2T1870KgkkzS7N6CLUdmpvbipyV4hv7pQVSe8PGittHllo7J9Z7N5Y9W3Z39uCA',
    [1]: 'MwdgPgTMkDQXD5IQRhgBhm5PF97mptvqQalpWkVbdXQ/Uxo5eeTZly97zy5359h/Euzw1mUgbWIzpCynPHS5I9UpgBOGRpGSGyQZh0HVmxWtYGdfMRYZXuBvbs3P5sthSei3Z6y8Xdz9lIM96KwAWLGI42ISUeKTE+IBWf0cHYyFcu2zAuRzXfMUA4I9CXPKI1nF4NGBvYIN4AA4fBzDG7xVAmt8wo2raosK8idLalHNIyfmxq1mWADZU9ZTN5O2YEEzmJea3fMOxsq6Lk96CuZyK+fvDg+uc02mLyxvw2z9h5+KHiwfgCNDV7FUzqxIU8vst6hIFojBkiRvC/llzpioYE0WROuC8biGjIiUA===',
    [2]: 'MzA+CYEZUgaOHyYly2o+rnEAZb6EFJGknFlFyXHUX15b52pk73NqeeO+zjkAnLQ7kaVUXWGcBLcq3kie2Jou6rGNOhPGi2kvSIWZlfEytOLEA2UsMSALPGYvnbgKxj7im/z9zLdTlzAI0RX2M7HR8/WyCDeM16aTUkYAY/AA5/enTQqUNI9Wi5XzjUkqMkCLtg1JQisPiynOLvOAA2N0hXHrcAdi9dUpyzLgsVOrHpoYz9XQXZ7QMp2rX2RvzxvnKU5bbhhNg91u2zwIzzCT4LpPnC72itdsnXjbePnCA===',
    [3]: 'MwRgPgTMYgNHD5MS5aAMbXa7zm4BOWfJU8k2YMm0oyiuCgypmtnD17llxX3Gzo9KxIQxHiBzStX552kjIvlc+KiTOmbF2gfRmrB3I1olrjXKbRHDOunXuP6lAFngFPH7yC8BWDQsLM2srS0dbSNQXdXE4CFgEhLilWNxiYRCkOUTYAA5cuBzrTNFwoKjcpJtoh1qnEpNkHAaI0oqjADYfL18e7wB2OqV6yMYm+3Gp80DlYLbZtKNGsTHhrLM7CdSFMIqXZaoF1qdhDJ2t012dvbmbiJWbF2pNm1XL8s+lz84gA=='
}

export var maps = {}

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 id = 'map' + (mapId+1)
        let content = (document.getElementById(id) as HTMLTextAreaElement).value.trim()
        console.log(id, content)
        if (content.length > 0) {
            maps[mapId] = content
        } else {
            maps[mapId] = defaultMaps[mapId]
        }

    }

    startGame(room_code, player_name)
}

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

custommaps.onclick = function() {
    popup.style.display = 'flex'
}

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"
    custommaps.style.display = "none"
    popup.style.display = "none"
    lobby.style.display = ""

    return true
}

const updateGraphics = startGraphicsUpdater()

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,
            maps: {},
            name
        }
    )

}