import React from 'react';
import axios from "axios";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { loadProgressBar } from 'axios-progress-bar'
import {Helmet} from "react-helmet";
import { ToastContainer } from 'react-toastify';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import PrivateRoute from "./components/routing/privateRoute"
import ScrollToTop from "./components/routing/scrollToTop"
import Home from './pages/home';
import About from './pages/about';
import Drafter from './pages/drafter';
import ContestList from './pages/contestList';
import Contest from './pages/contest';
import Legislation from './pages/legislation';
import ContestEditor from './pages/contestEditor';
import LegislationEditor from './pages/legislationEditor';
import Login from './pages/login';
import Register from './pages/register';
import Checkout from './pages/checkout';
import PaymentThankyou from './pages/paymentThankyou';
import * as constants from './constants'

// Loading bar for pages with axios requests
let api = axios.create({
  timeout: 10000,
})
loadProgressBar('',api)

const stripePromise = loadStripe(constants.STRIPE_KEY);

function App() {
  return (

  <Elements stripe={stripePromise}>
    <BrowserRouter>
      <ScrollToTop />
      <div className="App">
        <Helmet>
            <meta charset="utf-8" />
            <meta name="description" content="Make direct democracy viable by enabling citizens to draft and submit their own legislation." />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
            <title>Turq</title>
        </Helmet>
        <ToastContainer
          closeOnClick
          position="top-center"
          autoClose={5000}
          hideProgressBar={true}
          draggable
          newestOnTop={false}
        />
      </div>

      <Switch>
        <Route path={constants.HOME_PAGE_URL} exact component={Home} />
        <Route path={constants.ABOUT_PAGE_URL} component={About} />
        <Route path={constants.DRAFTER_PAGE_URL} component={Drafter} />
        <Route path={constants.LOGIN_PAGE_URL} component={Login} />
        <Route path={constants.REGISTER_PAGE_URL} component={Register} />
        <Route path={constants.CONTEST_PAGE_URL} exact component={ContestList} />
        <Route path={constants.CONTEST_PAGE_URL + "/:id"} component={Contest}/>
        <Route path={constants.LEGISLATION_PAGE_URL + "/:id"} component={Legislation}/>
        <Route path={constants.THANKYOU_URL} component={PaymentThankyou} />
        <PrivateRoute path={constants.CHECKOUT_PAGE_URL} component={Checkout}/>
        <PrivateRoute path={constants.EDITOR_PAGE_URL + "/contest"}  exact component={ContestEditor}/>
        <PrivateRoute path={constants.EDITOR_PAGE_URL + "/contest/:id"}  exact component={ContestEditor}/>
        <PrivateRoute path={constants.EDITOR_PAGE_URL + "/legislation"} exact component={LegislationEditor}/>
        <PrivateRoute path={constants.EDITOR_PAGE_URL + "/legislation/:id"} exact component={LegislationEditor}/>
      </Switch>

    </BrowserRouter>
  </Elements>
  );
}

export default App;