import React from 'react';
import { BrowserRouter, Link, Route, Switch, useLocation } from 'react-router-dom';
import { Provider } from 'react-redux';
import { useTranslation } from 'react-i18next';

import { IndexPage } from './pages';
import { RankingPage } from './pages/ranking';
import { Header } from './components/Header';
import { TermPage } from './pages/term';
import { store } from './store';
import { ModalComponent } from './Modal';
import { useTheme } from './misc/theme';

import 'xeltica-ui/dist/css/xeltica-ui.min.css';
import './style.scss';

const AppInner : React.VFC = () => {
	const $location = useLocation();

	useTheme();

	const {t} = useTranslation();

	return (
		<>
			<div className="container">
				{$location.pathname !== '/' && <Header hasTopLink />}
				<Switch>
					<Route exact path="/" component={IndexPage} />
					<Route exact path="/ranking" component={RankingPage} />
					<Route exact path="/term" component={TermPage} />
				</Switch>
				<footer className="text-center pa-5">
					<p>(C)2020-2021 Xeltica</p>
					<p><Link to="/term">{t('termsOfService')}</Link></p>
				</footer>
				<ModalComponent />
			</div>
		</>
	);
};

export const App: React.VFC = () => (
	<Provider store={store}>
		<BrowserRouter>
			<AppInner />
		</BrowserRouter>
	</Provider>
);