import React from 'react';

import { HashRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

import { DefaultLayoutSidebar, DefaultLayout } from 'dashboard-components/lib/layouts';

import {
  DocumentsPage,
  GlossaryPage,
  ChartsPage,
  AnnotationsPage,
  TermPage,
} from 'dashboard-components/lib/pages';

import { ScrollToTop } from 'dashboard-components/lib/ui';


import { FormattedMessage } from 'react-intl';

import config from './config.json';

import './App.css';

const version = process.env.REACT_APP_VERSION;
const viaBaseUrl = process.env.REACT_APP_VIA_BASE_URL;
const discussionUrl = process.env.REACT_APP_DISCUSSION_URL;
const {
  metacategories,
  topics,
  documents,
  title,
  dashboardId,
} = config;

const DocumentsPageBanner = ({
  documentsMap,
  topics: topicsProp,
  metacategories: metacategoriesProp,
  viaBaseUrl: viaBaseUrlProp,
}) => (
  <DocumentsPage
    documentsMap={documentsMap}
    topics={topicsProp}
    metacategories={metacategoriesProp}
    viaBaseUrl={viaBaseUrlProp}
  >
    <div className="row">
      <h3><a className="scenarioterre-link" href={`${viaBaseUrlProp}http://scenario-terre.space/`} target="_blank" rel="noopener noreferrer"><FormattedMessage id="home.scenarioterre.welcome" defaultMessage="Annotez le site «&nbsp;Scénario Terre&nbsp;»" /></a></h3>
      <div className="scenarioterre-banner-container">
        <a className="scenarioterre-banner" href={`${viaBaseUrlProp}http://scenario-terre.space/`} target="_blank" rel="noopener noreferrer">&nbsp;</a>
      </div>
    </div>
  </DocumentsPage>
);

DocumentsPageBanner.propTypes = {
  viaBaseUrl: PropTypes.string.isRequired,
  documentsMap: PropTypes.arrayOf(PropTypes.object).isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  topics: PropTypes.arrayOf(PropTypes.string).isRequired,
};

const App = () => (
  <HashRouter>
    <ScrollToTop>
      <div>
        <DefaultLayoutSidebar
          exact
          path="/"
          component={DocumentsPageBanner}
          version={version}
          metacategories={metacategories}
          topics={topics}
          documentsMap={documents}
          viaBaseUrl={viaBaseUrl}
          title={title}
        />
        <DefaultLayout
          path="/glossary"
          component={GlossaryPage}
          title={title}
          version={version}
        />
        <DefaultLayoutSidebar
          path="/charts"
          component={ChartsPage}
          metacategories={metacategories}
          topics={topics}
          title={title}
          version={version}
        />
        <DefaultLayoutSidebar
          path="/annotations/:tagName?"
          component={AnnotationsPage}
          metacategories={metacategories}
          topics={topics}
          viaBaseUrl={viaBaseUrl}
          title={title}
          version={version}
        />
        <DefaultLayoutSidebar
          path="/term/:term/:activeTab?/:messageId?"
          component={TermPage}
          title={title}
          viaBaseUrl={viaBaseUrl}
          metacategories={metacategories}
          topics={topics}
          version={version}
          discussionUrl={discussionUrl}
          dashboardId={dashboardId}
        />
      </div>
    </ScrollToTop>
  </HashRouter>
);

export default App;