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

import * as actions from '../actions'

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

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

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

export default connect(mapStateToProps, mapDispatchToProps)(Header)