import React from 'react'
import { bindActionCreators } from 'redux'
import { Connector } from 'react-redux'
import InternalNav from 'react-internal-nav'
import AboutPage from '../components/about-page'
import DataPage from '../components/data-page'
import PersonDetail from '../components/person-detail'
import OverlayPage from './overlay-page'
import * as UrlActions from '../actions/url-actions'

export default class FooApp {
  render() {
    return (
      <Connector>
        {this.renderChild}
      </Connector>
    )
  }

  renderChild({ personData: {persons}, dispatch, url }) {
    const actions = {
      ...bindActionCreators(UrlActions, dispatch)
    }

    let page
    let style

    if (url === '/') {
      // render to URL as well
      setQueryString({q: query})
    } else if (url === '/about') {
      page = (<AboutPage/>)
    } else if (url === '/data') {
      page = (<DataPage persons={persons}/>)
    } else {
      let match
      persons.some(person => {
        if (person.slug === url.slice(1)) {
          match = person
          return true
        }
      })
      if (match) {
        page = (<PersonDetail person={match} {...actions}/>)
      } else {
        page = (<h1>404</h1>)
      }
    }

    if (page) {
      page = (
        <OverlayPage setUrl={actions.setUrl}>
          {page}
        </OverlayPage>
      )
    }

    return (
      <InternalNav onInternalNav={actions.setUrl}>
        <header>
          <nav role='navigation'>
            <a href='/'>Example.com</a>
            <span>
              <a href="/data">Notes</a>
              <a href="/about">About</a>
            </span>
          </nav>
        </header>
        {page}
      </InternalNav>
    )
  }
}