import React, {useEffect} from 'react';
import {inject, observer} from "mobx-react";
import {Web3State, AppStore} from "./store/AppStore";
import {
    Typography
} from "@material-ui/core";
import {Router, Switch, Route} from "react-router-dom";

import {Main} from "./components/Main";


type Props = {
    appStore?: AppStore
}

const App: React.FC<Props> = (props) => {
    const appStore = props.appStore!;
    const {web3State, prepareMetamask, history} = appStore;

    useEffect(() => {
        prepareMetamask()
    }, [prepareMetamask]);

    // This state will show that metamask is not ready/activated yet
    if (web3State === Web3State.UNKNOWN)
        return null;

    // If there is no metamask at all
    if (web3State === Web3State.NO_METAMASK)
        return <div
            style={{
                display: "flex",
                width: "100vw",
                height: "100vh",
                alignItems: "center",
                justifyContent: "center"
            }}>
            <Typography variant={"h3"}>
                Please install metamask to use the dApp
            </Typography>
        </div>;

    // User did not give permissions to our application
    if (web3State === Web3State.LOCKED) {
        return <div
            style={{
                display: "flex",
                width: "100vw",
                height: "100vh",
                alignItems: "center",
                justifyContent: "center"
            }}>
            <Typography variant={"h3"}>
                Please unlock metamask to use the dApp
            </Typography>
        </div>;
    }

    return <Router history={history}>
            <Switch>
                <Route path="/">
                    <Main />
                </Route>
            </Switch>
        </Router>;
};

export const AppComponent = inject('appStore')(observer(App));