import "./variables.css";
import "./App.css";

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Snackbar from "@material-ui/core/Snackbar";
import IconButton from "@material-ui/core/IconButton";

import globalData from './GlobalData.js';
import BottomMenu from "./components/BottomMenu.js";

import Tickets from "./components/pages/Tickets.js";
import TicketsBuy from "./components/pages/TicketsBuy.js";
import Travel from "./components/pages/Travel.js";
import TrafficInfo from "./components/pages/TrafficInfo.js";

import "./variables.css";
import warningIcon from './img/warning.svg';
import closeIcon from './img/close.svg';


class App extends Component {
    currentPageName = () => {
        if (globalData.currentPage.constructor !== undefined)
            return globalData.currentPage.constructor.name;
        else
            return "";
    };
    
    render() {
        globalData.root = this;

        return (
            <Router>
                <div className="App">
                    <Route path="/" exact component={TicketsBuy} />
                    <Route path="/tickets" exact component={Tickets} />
                    <Route path="/ticketsBuy" exact component={TicketsBuy} />
                    <Route path="/travel" exact component={Travel} />
                    <Route path="/traffic" exact component={TrafficInfo} />

                    <BottomMenu />

                    <Snackbar
                        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
                        open={globalData.snackbarVisible}
                        autoHideDuration={3000}
                        onClose={() => globalData.snackbarVisible = false}
                        message={
                            <div id="snackDisruptInfo">
                                <img src={warningIcon} alt="" />
                                <span id="message-id">Trafikstörning upptäckt</span>
                            </div>
                        }
                        action={[
                            <IconButton
                                key="close"
                                aria-label="Close"
                                color="inherit"
                                onClick={() => { globalData.snackbarVisible = false; globalData.root.forceUpdate() }}
                            >
                                {this.currentPageName() !== "TrafficInfo" &&
                                    <Link to="/traffic">Visa trafikinfo</Link>
                                }
                                <img src={closeIcon} alt="" />
                            </IconButton>,
                        ]}
                    />
                </div>
            </Router>
		);
    }
}

export default App;