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

import actions from 'app/actions'
import { ROMAN_NUMERALS } from 'app/constants'
import { Arrow } from '../nav/viewer.icons'

class ChecklistDropdown extends Component {
  state = {
    open: false,
  }
  handleOpen() {
    this.setState({ open: !this.state.open })
  }
  handleSelect(index) {
    this.props.onChange(index)
    this.setState({ open: false })
  }
  render() {
    const { sections, checklistSection } = this.props
    const { open } = this.state
    const showingAll = checklistSection === 'all'
    let dropdownHeight = sections.length * 2
    if (!showingAll) {
      dropdownHeight += 2
    }
    return (
      <div className="checklist-dropdown-column">
        <div className="checklist-dropdown-container">
          <div className="checklist-dropdown" onClick={() => this.handleOpen()}>
            {showingAll ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
            <div className='arrow-box'>
              <Arrow type={open ? 'up' : 'down'} />
            </div>
          </div>
          <div
            className={open ? "checklist-dropdown-options open" : "checklist-dropdown-options"}
            style={{ height: open ? ((dropdownHeight) + 'rem') : 0 }}
          >
            {sections.map(section => (
              <div key={section.index} onClick={() => this.handleSelect(section.index)}>
                {'Section '}{ROMAN_NUMERALS[section.index]}
              </div>
            ))}
            {!showingAll &&
              <div onClick={() => this.handleSelect('all')}>
                {'View All'}
              </div>
            }
          </div>
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(ChecklistDropdown)