import {createRoot} from 'react-dom/client';
import React, {Component} from "react";
import Startup from "./Startup";
import WiFi from "./WiFi";
import Game from "./Game";
import GameSetup from "./GameSetup";
import GameEnd from "./GameEnd";
import Setup from "./Setup";

const root = createRoot(document.getElementById("root"));


export enum PAGE {
    STARTUP,
    SETUP,
    WIFI,
    CLOUD,
    GAME_SETUP,
    GAME,
    GAME_END
}

interface AppState {
    currentPage: PAGE,
    showWiFi: boolean,
}

export class App extends Component<{}, AppState> {

    static PAGES: Map<PAGE, Component> = new Map<PAGE, React.Component>();

    constructor(props: {}) {
        super(props);
        this.state = {
            currentPage: PAGE.GAME_SETUP,
            showWiFi: false,
        }
    }

    toggleWiFiSettings = (state: boolean) => {
        this.setState((prevState) => ({
            ...prevState,
            showWiFi: state
        }));
    }

    toggleSetup = (state: boolean) => {
        this.setState((prevState) => ({
            ...prevState,
            showSetup: state
        }));
    }

    public setPage = (page: PAGE) => {
        this.setState((prevState) => ({
            ...prevState,
            currentPage: page
        }));
    }



    render() {
        return (
            <div className="app">
                {this.state.showWiFi ? <WiFi/> : null}

                {this.state.currentPage == PAGE.STARTUP || this.state.currentPage == PAGE.SETUP ? <Startup visible={this.state.currentPage == PAGE.STARTUP} ref={(ref) => {
                    App.PAGES.set(PAGE.STARTUP, ref);
                }}/> : null}

                {this.state.currentPage == PAGE.SETUP ? <Setup ref={(ref) => {
                    App.PAGES.set(PAGE.SETUP, ref);
                }}/> : null}

                {this.state.currentPage == PAGE.GAME_SETUP ? <GameSetup ref={(ref) => {
                    App.PAGES.set(PAGE.GAME_SETUP, ref);
                }}/> : null}

                {this.state.currentPage == PAGE.GAME ? <Game ref={(ref) => {
                    App.PAGES.set(PAGE.GAME, ref);
                }}/> : null}

                {this.state.currentPage == PAGE.GAME_END ? <GameEnd ref={(ref) => {
                    App.PAGES.set(PAGE.GAME_END, ref);
                }}/> : null}
            </div>
        );
    }
}


root.render(
    <App ref={(ref) => {
        window.app = ref;
    }}/>
)