/*
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 {connect} from 'preact-redux';
import PropTypes from 'prop-types';
import {Switch, Route, withRouter} from 'react-router-dom';
import {Container, Row, Col} from 'reactstrap';
import Helmet from 'preact-helmet';

import {ConnectedThemeSwitchView} from '../views/theme_switcher_button';

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';


class App extends Component {
  static get propTypes() {
    return {
      menu: PropTypes.object,
      footer: PropTypes.string,
      siteName: PropTypes.string,
      logo: PropTypes.string,
      tagline: PropTypes.string,
      page: PropTypes.object
    }
  }

  render() {
    // TODO: Figure out the favicon issue with Helmet not rendering content.
    /*
    <Helmet
          title={ this.props.page.title }
          titleTemplate='%s - Rookeries'
          link={ [
            {rel: 'icon', type: 'image/icon', href: 'this.props.site.favicon'}
          ] } />
    */
    return (
      <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
        <Helmet
          title={ this.props.page.title }
          titleTemplate='%s - Rookeries' />

        <ControlPanel />
        <ToggleSwitch />

        <Container>

          {/*TODO Extract as header container.*/}
          <Row className='justify-content-end'>
            <Col lg='4'>
              <ConnectedThemeSwitchView />
            </Col>
          </Row>

          <SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />

          {/*TODO Extract as Main body and navigation sidebar containers.*/}
          <Row className='justify-content-center'>
            <Col lg='3'>
              <NavigationMenu menu={ this.props.menu } />
            </Col>
            <Col lg='8' className='ice-floe'>
              <Switch>
                <Route exact path='/' component={ PageBlock } />
                <Route path='/:pageId' component={ PageBlock } />
              </Switch>
            </Col>
          </Row>

          <SiteFooter footer={ this.props.footer } />

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

export const RookeriesApp = withRouter(connect(
  (state) => {
    return {
      'menu': state.menu,
      'footer': {
        'slug': '_header',
        'content': state.site.footer,
      },
      'site': {
        'favicon': state.site.favicon
      },
      'siteName': state.site.name,
      'logo': state.site.logo,
      'tagline': state.site.tagline,
      'page': {
        'slug': state.page.id,
        'content': state.page.content,
        'title': state.page.title,

        // TODO: Migrate to using standalone editor
        'editorTheme': state.editor.theme,
        'userCanEdit': state.user.token !== ''
      },
      'editor': {
        'editorTheme': state.editor.theme,
        'userCanEdit': state.user.token !== ''
      }
    };
  })(App));
