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

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

//window.app = window.MyNamespace || {};


interface HeadingSwitcherState {
    counter: number;
}

class HeadingSwitcher extends Component<{}, HeadingSwitcherState> {
    private interval: NodeJS.Timeout;

    constructor(props: {}) {
        super(props);
        this.state = {counter: 0};
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 500);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    tick() {
        if (this.state.counter > 5)
            this.setState({counter: 1});
        else
            this.setState({counter: this.state.counter + 1});


    }

    render() {
        switch (this.state.counter) {
            case 1:
                return <h1>H1</h1>;
            case 2:
                return <h2>H2</h2>;
            case 3:
                return <h3>H3</h3>;
            case 4:
                return <h4>H4</h4>;
            case 5:
                return <h5>H5</h5>;
            case 6:
                return <h6>H6</h6>;
        }
    }
}


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.STARTUP,
            showWiFi: false
        }
    }

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



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

                {this.state.currentPage == PAGE.STARTUP ? <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.WIFI ? <WiFi ref={(ref) => {
                    App.PAGES.set(PAGE.WIFI, ref);
                }}/> : null}

                {this.state.currentPage == PAGE.CLOUD ? <Cloud ref={(ref) => {
                    App.PAGES.set(PAGE.CLOUD, 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;
    }}/>
)