import React, { Component } from 'react'

import actions from 'app/actions'

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

class Checklist extends Component {
  state = {
    currentSection: 'all',
  }
  constructor(props) {
    super(props)
    this.handleSectionChange = this.handleSectionChange.bind(this)
  }
  handleSectionChange(currentSection) {
    this.setState({ currentSection })
  }
  render() {
    const { currentSection } = this.state
    return (
      <div className="checklist">
        <ChecklistDropdown
          currentSection={currentSection}
          onChange={this.handleSectionChange}
        />
        <ChecklistContent
          currentSection={currentSection}
        />
      </div>
    )
  }
}

export default Checklist