import React, { Component } from 'react'
import { connect } from 'react-redux'

import actions from 'app/actions'

import ChecklistDropdown from './checklist.dropdown'
import ChecklistContent from './checklist.content'
import CreditsContent from './credits.content'

class Checklist extends Component {
  state = {
    checklistSection: 'all',
  }
  constructor(props) {
    super(props)
    this.handleSectionChange = this.handleSectionChange.bind(this)
  }
  handleSectionChange(checklistSection) {
    this.setState({ checklistSection })
  }
  render() {
    const { viewer } = this.props
    const { checklistSection } = this.state
    return (
      <div className="checklist">
        {!viewer.credits && (
          <div className="checklist-container">
            <ChecklistDropdown
              checklistSection={checklistSection}
              onChange={this.handleSectionChange}
            />
            <div className="checklist-inner">
              <div className="checklist-dropdown-placeholder" />
              <ChecklistContent
                checklistSection={checklistSection}
              />
            </div>
          </div>
        )}
        {viewer.credits && (
          <CreditsContent />
        )}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  viewer: state.viewer,
})

export default connect(mapStateToProps)(Checklist)