import React from 'react';
import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import { studentTheme } from "./ui/theme";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom"

import "moment/locale/pl"
import '@/styles/overrides.scss'
import '@/styles/header.scss'

import moment, { Moment } from "moment";
import { route, routes } from "@/routing";
import { Button, Divider } from '@material-ui/core';

moment.locale("pl")

class LocalizedMomentUtils extends MomentUtils {
    getDatePickerHeaderText(date: Moment): string {
        return this.format(date, "d MMM yyyy");
    }
}

function App() {
    return (
        <StylesProvider injectFirst>
            <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
                <ThemeProvider theme={ studentTheme }>
                    <BrowserRouter>
                        <header className="header">
                            <div id="logo" className="header__logo">
                                <Link to={ route('home') }>
                                    <img src="img/pg-logotyp.svg"/>
                                </Link>
                            </div>
                            <div className="header__nav">
                                <nav className="header__top">
                                    <ul className="header__menu"></ul>
                                    <div className="header__user">
                                        zalogowany jako: <strong>Jan Kowalski</strong>
                                        {' '}
                                        (<Link to={'#'}>wyloguj się</Link>)
                                    </div>
                                    <div className="header__divider" />
                                    <ul className="header__language-switcher">
                                        <li>pl</li>
                                        <li>en</li>
                                    </ul>
                                </nav>
                                <nav className="header__bottom">
                                    <ul className="header__menu header__menu--main"></ul>
                                </nav>
                            </div>
                        </header>
                        <Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
                    </BrowserRouter>
                </ThemeProvider>
            </MuiPickersUtilsProvider>
        </StylesProvider>
    );
}

export default App;