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 Header(props){
  const { site, app, fps, playing, actions, location } = 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) => {
    let name = link.url === location.pathname ? <b>{link.name}</b> : link.name
    return (
      <span key={i}>
        {link.url ? <Link to={link.url}>{name}</Link> : name}
      </span>
    )
  })
  return (
    <header>
      <b>{site.name} cortex</b>
      <span>
        <select onChange={e => actions.changeTool(e.target.value)} value={app.tool}>
          {tool_list}
        </select>
      </span>
      <span><Link to="/system">system</Link></span>
      <span><Link to="/dashboard">dashboard</Link></span>
      <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)