import com.Foo;
import components.Header;
import react.ReactMacro.jsx;
import react.ReactComponent;
import react.router.Route;

typedef RootState = {
    route: String,
    ?component: react.React.CreateElementType
}

class Root extends react.ReactComponentOfState<RootState> {

    public function new() {
        super();
        state = { route:'' };
    }

    override function componentDidMount() {
		switch (state.route) {
			default:
				Webpack.load(Foo).then(function(_) {
					setState(cast { component:Foo });
				});
		}
    }
    function yeet(){
        //state.route="yeet";
        //trace(this.props.location.pathname);
        trace(state);
    }

    override function render() {
        return jsx('
            <div>
                <Header foo=${yeet}/>
                <h1>Hello Haxe + Webpack + React</h1>
                ${renderContent()}
            </div>
        ');
    }

    function renderContent() {
        if (state.component == null)
            return jsx('
                <span>Loading...</span>
            ');
        else
            return jsx('
                <state.component />
        ');
    }
}