import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router-dom';
import { connect } from 'react-redux'

import * as systemActions from '../system/system.actions'

import modules from '../modules'

function NavLink(props){
  if (! props.to) {
    return <span>{props.children}</span>
  }
  let children = props.to === props.location.pathname ? <b>{props.children}</b> : props.children
  return (
    <span><Link to={props.to}>{children}</Link></span>
  )
}

function Header(props){
  const { site, app, fps, playing, actions, location, history } = props
  const tool_list = Object.keys(modules).map((name, i) => {
    const label = name.replace(/_/, " ")
    return <option value={name} key={i}>{label}</option>
  })
  const tool = modules[app.tool]
  const links = tool.links().map((link,i) => {
    return (
      <NavLink key={i} location={location} to={link.url}>{link.name}</NavLink>
    )
  })
  return (
    <header>
      <span><b>{site.name} cortex</b></span>
      <span>
        <select onChange={e => {
          let path = window.location.pathname.split("/")
          path.shift()
          console.log(path)
          if (path[0] in modules && path[1]) {
            history.push('/' + e.target.value + '/' + path[1] + '/')
          }
          actions.changeTool(e.target.value, true)
        }} value={app.tool}>
          {tool_list}
        </select>
      </span>
      <NavLink location={location} to="/system">system</NavLink>
      <NavLink location={location} to="/dashboard">dashboard</NavLink>
      <span>{links}</span>
      {playing && <span>{fps} fps</span>}
    </header>
  )
}

const mapStateToProps = state => ({
  site: state.system.site,
  app: state.system.app,
  fps: state.live.fps,
  playing: state.live.playing,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(systemActions, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(Header)