import React from 'react'
import newEventStores from 'stores/newEvent'
import uiStores from 'stores/ui'
import cls from 'classnames'
import EventCodeJenga from './coms/EventJenga'

export default class NewEventView extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      eventPanelMode: null,
      sidebarExpand: true,
      curEventNodeList: newEventStores.curEventNodeList,
      filterBlockIdsMap: newEventStores.filterBlockIdsMap
    }
    this.onEventChange = this.onEventChange.bind(this)
    this.onUIChange = this.onUIChange.bind(this)
  }

  componentDidMount() {
    this.unsubscribeEvent = newEventStores.listen(this.onEventChange)
    this.unUISubscribe = uiStores.listen(this.onUIChange)
  }

  componentWillUnmount() {
    this.unsubscribeEvent()
    this.unUISubscribe()
  }

  onEventChange(status) {
    let obj = {}
    if (status.data && status.data.showEventView !== undefined) {
      if (this.state.visible !== status.data.showEventView) {
        obj.visible = status.data.showEventView
      }
      if (this.state.eventPanelMode !== status.data.eventPanelMode) {
        obj.eventPanelMode = status.data.eventPanelMode
      }
      if (this.state.curEventNodeList !== status.data.curEventNodeList) {
        obj.curEventNodeList = status.data.curEventNodeList
      }
      if (this.state.filterBlockIdsMap !== status.data.filterBlockIdsMap) {
        obj.filterBlockIdsMap = status.data.filterBlockIdsMap
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  onUIChange(status) {
    let obj = {}
    if (status.types) {
      if (status.types.includes('sidebarToggle')) {
        if (this.state.sidebarExpand !== status.data.sidebarExpand) {
          obj.sidebarExpand = status.data.sidebarExpand
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  render() {
    let {
      visible,
      eventPanelMode,
      sidebarExpand,
      curEventNodeList,
      filterBlockIdsMap
    } = this.state
    return visible && eventPanelMode ? (
      <div
        className={cls('event-view jenga-mode', {
          'sidebar-collapse': !sidebarExpand
        })}
      >
        {eventPanelMode === 'citedJengas' ? (
          <EventCodeJenga
            curEventNodeList={curEventNodeList}
            filterBlockIdsMap={filterBlockIdsMap}
          />
        ) : eventPanelMode === 'jenga' ? (
          <EventCodeJenga />
        ) : null}
      </div>
    ) : null
  }
}