/*
Rookeries client app

@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

import {h, Component} from 'preact';  /** @jsx h*/

import {Switch, Route} from 'react-router-dom';
import Helmet from 'preact-helmet';
import {observer} from 'mobx-observer';

import {ThemeSwitcher} from '../themes/ThemeSwitcher';
import {SiteHeader} from './SiteHeader';
import {SiteFooter} from './SiteFooter';
import {NavigationMenu} from './NavigationMenu';
import {PageBlock} from '../views/MarkdownBlock';

import {ControlPanel} from '../admin/ControlPanel';
import {ToggleSwitch} from '../admin/ToggleSwitch';
import {pageStore, siteStore} from '../stores';


@observer
export class App extends Component {
  render() {
    const pageTitle = `${pageStore.title} - ${siteStore.name}`;

    const appStyle = {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
    };

    const siteLayout = {
      display: 'grid',
      gridTemplateRows: '20dp 150dp repeat(6, 1fr)',
      gridTemplateColumns: 'repeat(9, 1fr)'
    };

    const themeLocation = {
      gridRow: '1',
      gridColumn: '7 / 9'
    };

    const headerLocation = {
      gridRow: '2',
      gridColumn: '2 / 9'
    };

    const menuLocation = {
      gridRow: '3',
      gridColumn: '2 / 3',
    };

    const footerLocation = {
      gridRow: '8',
      gridColumn: '2 / 9'
    };

    return (
      <div style={ appStyle }>
        <Helmet
          title={ pageTitle }
          link={ [
            {rel: 'icon', type: 'image/icon', href: siteStore.config.favicon}
          ] } />

        <ControlPanel />
        <ToggleSwitch  />

        <div style={ siteLayout }>

          {/*TODO Extract as header container.*/}
          <ThemeSwitcher styler={ themeLocation } />

          <SiteHeader
            styler={ headerLocation }
            siteName={ siteStore.name }
            logo={ siteStore.config.logo }
            tagline={ siteStore.config.tagline } />

          {/*TODO Extract as Main body and navigation sidebar containers.*/}
          <NavigationMenu menu={ siteStore.menu } styler={ menuLocation } />
          <Switch>
            <Route exact path='/' component={ PageBlock } />
            <Route path='/:pageId' component={ PageBlock } />
          </Switch>

          <SiteFooter footer={ siteStore.config.footer } styler={ footerLocation } />

        </div>
      </div>
    );
  }
}
