import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import NotFound from 'ui/core/NotFound';
import ApiInfoPage from 'serverinfo/ApiInfoPage';
import AccessionList from 'accession/AccessionListPage';
import AccessionDetails from 'accession/AccessionDetailsPage';
import { createHashHistory } from 'history';
import CartPage from 'request/CartPage';
import OverviewPage from 'accession/OverviewPage';
import RequestPage from 'request/RequestPage';

const hashHistory = createHashHistory({});

interface IAppProps extends React.ClassAttributes<any> {
  apiUrl: string;
  filter: object;
}

export default class App extends React.Component<IAppProps, any> {
  public render() {
    const { apiUrl } = this.props;
    console.log('Using filter', this.props.filter);
    return (
      <>
        <Router>
          <div>
            <Switch>
              <Route path="/a/:uuid" exact render={ (props) => <AccessionDetails { ...props } apiUrl={ apiUrl } /> } />
              <Route path="/" exact render={ (props) => <AccessionList { ...props } filter={ this.props.filter } /> }/>
              <Route path="/api-info" exact component={ ApiInfoPage }/>
              <Route path="/cart" exact component={ CartPage }/>
              <Route path="/overview" exact render={ (props) => <OverviewPage { ...props } filter={ this.props.filter } /> }/>
              <Route path="/request" exact component={ RequestPage }/>
              <Route component={ NotFound }/>
            </Switch>

            <div style={ { marginTop: 20, textAlign: 'center', fontSize: '10pt' } }>
              <img style={ { height: '1.2em', verticalAlign: 'text-bottom' } } src={ `${apiUrl}/html/1/images/GENESYS-ICON.svg` } alt="Genesys PGR" />
              <> Powered by <a target="_blank" title="Data sourced from Genesys" href={ apiUrl }>Genesys PGR</a></>
            </div>
          </div>
        </Router>
      </>
    );
  };
}

export { hashHistory as history };