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({ site, app, fps, playing, actions }) {
  const tool_list = Object.keys(modules).map((name, i) => {
    const label = name.replace(/_/, " ")
    return <option value={name} key={i}>{label}</option>
  })
  const Links = modules[app.tool].links
  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>
      <Links />
      {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)