import React from 'react'
import cls from 'classnames'
import i18n from 'i18next'
import newEventActions from 'actions/newEvent'
import newEventStores from 'stores/newEvent'

export default class JengaNavMemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      expanded: newEventStores.showMemo
    }
    this.onEventChange = this.onEventChange.bind(this)
    this.onToggleMemo = this.onToggleMemo.bind(this)
  }

  componentDidMount() {
    this.unsubscribe = newEventStores.listen(this.onEventChange)
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  onEventChange(status) {
    let obj = {}
    if (status && status.types) {
      if (status.types.includes('showMemo')) {
        if (this.state.expanded !== status.data.showMemo) {
          obj.expanded = status.data.showMemo
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  onToggleMemo() {
    newEventActions.toggleMemo({})
  }

  render() {
    return (
      <div className={cls('jenga-nav-memo', { expanded: this.state.expanded })}>
        <button
          className="btn-clear btn-toggle-memo f--hcc"
          onClick={this.onToggleMemo}
        >
          <div className="icon" />
          <div className="title">{i18n.t('EventView.jenga_nav.memo')}</div>
        </button>
      </div>
    )
  }
}