import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';
import { Switch, Route, HashRouter, Link } from 'react-router-dom';
import About from './components/About';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Page from './components/Page';
const markdown = require('./resources/markdown.json');

const $leftPanel = $('#left-panel');
const $window = $(window);
function onResize() {
  $leftPanel.css('max-height', $window.height());
}
$window.on('resize', onResize);

function getSection(sectionIndex) {
  const section = markdown[sectionIndex];
  return () => (
    <div>
      <div className="breadcrumb-wrapper">
        <Link to='/' className="breadcrumb teal-text"><i className="material-icons">home</i></Link>
        <span className="breadcrumb grey-text">{section.title}</span>
      </div>
      <h4 className="header brown-text">{section.title}</h4>
      {getSectionPageLinks(section)}
    </div>
  );
}

function getSectionPagination(section, activeIndex) {
  const lastIndex = section.items.length - 1;
  const previousHref = activeIndex === 0 ? section.path :
    section.path + section.items[activeIndex - 1].path;
  const nextHref = activeIndex === lastIndex ? section.path :
    section.path + section.items[activeIndex + 1].path;
  return (
    <div className="pagination-wrapper">
      <ul className="pagination">
        <li className={ activeIndex === 0 ? "disabled": "waves-effect"}>
          <Link to={previousHref}><i className="material-icons">chevron_left</i></Link>
        </li>
        {
          section.items.map((page, pIndex) => (
            <li key={pIndex} className={ activeIndex === pIndex ? "active brown": "waves-effect"}>
              <Link to={section.path + page.path}>{pIndex + 1}</Link>
            </li>
          ))
        }
        <li className={ activeIndex === lastIndex ? "disabled": "waves-effect"}>
          <Link to={nextHref}><i className="material-icons">chevron_right</i></Link>
        </li>
      </ul>
    </div>
  );
}

function getPage(sectionIndex, pageIndex) {
  const section = markdown[sectionIndex];
  const page = section.items[pageIndex];
  return () => (
    <div>
      <Page page={page} section={section} />
      {getSectionPagination(section, pageIndex)}
    </div>
  );
}


function getSectionPageLinks(section) {
  return (
    <ul>
    {section.items.map((page, pIndex) => (
      <li key={pIndex}><Link to={section.path + page.path}>{page.title}</Link></li>
    ))}
    </ul>
  );
}

function getSectionRoutes(section, sIndex) {
  const routes = [{
    key: sIndex, path: section.path, component: getSection(sIndex)
  }].concat(section.items.map((page, pIndex) => ({
    key: sIndex + '-' + pIndex,
    path: section.path + page.path,
    component: getPage(sIndex, pIndex)
  })));
  return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
}

ReactDOM.render(
    <HashRouter>
      <div id="react-wrapper">
        <Navbar />
        <div className="main">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/a-propos" component={About} />
            {
              markdown.map(getSectionRoutes)
            }
          </Switch>
        </div>
      </div>
  </HashRouter>,
  document.getElementById('left-panel')
);