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

function Header(props) {
  const tools = "pix2pix samplernn style_transfer_video style_transfer_audio".split(" ").map((s,i) => {
    return <option value={s}>{s}</option>
  })
  return (
    <header>
      <b>live cortex</b>
      <span>
        <select>
          {tools}
        </select>
      </span>
      <span><Link to="/dashboard">dashboard</Link></span>
      <span>checkpoints</span>
      <span>datasets</span>
      <span>results</span>
      <span>live</span>
      <span>{props.fps} fps</span>
    </header>
  )
}

const mapStateToProps = state => ({
  fps: state.live.fps,
  frame: state.live.frame,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(Header)