const Phaser = require('phaser');

const Header = require('./header');
const Menu = require('./menu');
const Combat = require('./combat');
const Zones = require('./zones');
const Background = require('./background');
const GameList = require('./game.list');
const StatSheet = require('./statsheet');


function renderCryps() {
    const config = {
        type: Phaser.AUTO,
        // backgroundColor: '#181818',
        resolution: window.devicePixelRatio,
        // antialias: true,
        width: 1600,
        height: 1000,
        physics: {
            default: 'arcade',
            arcade: {
                debug: false,
                gravity: { y: 0 },
            },
        },
        scene: [
            Background,
            Header,
        ],
    };

    const game = new Phaser.Game(config);

    function newMainScene(key, scene, data) {
        let addScene = true;
        const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
        ACTIVE_MAIN_SCENES.forEach((sKey) => {
            if (game.scene.keys[sKey]) {
                if (key === sKey) {
                    game.scene.keys[sKey].scene.restart(data);
                    addScene = false;
                } else {
                    game.scene.keys[sKey].cleanUp();
                }
            }
        });
        if (addScene) game.scene.add(key, scene, true, data);
        return true;
    }

    function changeData(parent, key, data) {
        // Don't load other scenes if you're not logged in
        if (!game.registry.get('account')) return false;

        if (key === 'menu') {
            if (data) return game.scene.add('Menu', Menu, true);
        }

        if (key === 'game') {
            if (!data || game.registry.get('inGame')) return false;
            return game.scene.add('Combat', Combat, true);
        }

        if (key === 'zone') {
            newMainScene('Zones', Zones, data);
        }

        if (key === 'gameList') {
            newMainScene('GameList', GameList, data);
        }

        if (key === 'crypStats') {
            newMainScene('StatSheet', StatSheet, data);
        }

        return true;
    }

    game.registry.events.on('changedata', changeData);
    game.registry.events.on('setdata', changeData);

    function resize() {
        const canvas = document.querySelector('canvas');

        if (!canvas) return setTimeout(resize, 50);

        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const windowRatio = windowWidth / windowHeight;
        const gameRatio = game.config.width / game.config.height;
        if (windowRatio < gameRatio) {
            canvas.style.width = `${windowWidth}px`;
            canvas.style.height = `${(windowWidth / gameRatio)}px`;
        } else {
            canvas.style.width = `${(windowHeight * gameRatio)}px`;
            canvas.style.height = `${windowHeight}px`;
        }

        return true;
    }

    window.addEventListener('mouseup', () => game.registry.set('pan', false));
    window.addEventListener('mousedown', () => game.registry.set('pan', true));
    window.addEventListener('resize', resize, true);

    resize();

    return game;
}

module.exports = renderCryps;