import React, { Component } from 'react'
// import { NavLink } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { history } from '../store'

import * as actions from '../actions'

class Header extends Component {
  componentDidMount() {
    this.props.actions.getInstitutions()
    this.props.actions.getPapers()
  }

  pickPaper(e) {
    console.log(e.target.value)
    history.push('/paper/' + e.target.value + '/info/')
    // this.props.actions.getPaperData(e.target.value)
  }

  render() {
    let { papers } = this.props.api.papers
    papers = papers || {}
    const paperOptions = Object.keys(papers).map(key => (
      <option key={key} value={key}>{papers[key][1]}</option>
    ))
    return (
      <header>
        <section>
          <select onChange={this.pickPaper.bind(this)}>
            {paperOptions}
          </select>
        </section>
        <section></section>
      </header>
    )
  }
}

const mapStateToProps = state => ({
  api: state.api
})
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ ...actions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(Header)