import React, { Component } from 'react'
import { Link } 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.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
    let { dataset } = this.props.api.paperInfo
    papers = papers || {}
    const paperOptions = Object.keys(papers).map(key => (
      <option key={key} value={key}>{papers[key].name}</option>
    ))
    return (
      <header>
        <section>
          <select value={dataset && dataset.key} onChange={this.pickPaper.bind(this)}>
            {paperOptions}
          </select>
          {dataset && 
            <div>
              {dataset.name_full}{' - '}
              <Link to={"/paper/" + dataset.key + "/info"}>Info</Link>{' - '}
              <Link to={"/paper/" + dataset.key + "/citations/"}>Citations</Link>{' - '}
              <Link to={"/paper/" + dataset.key + "/random/"}>Random</Link>
            </div>
          }
        </section>
        <section></section>
      </header>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Header)