import React from 'react'
import uiStores from 'stores/ui'
// import JengaExtra from '../extra/JengaExtra'
import JengaItem from './JengaItem'

const minWidth = 858 // 最小宽度

export default class JengaPanel extends React.Component {
  constructor(props) {
    super(props)
    this.jengaContent = React.createRef()

    this.onUiChange = this.onUiChange.bind(this)
    this.setWidth = this.setWidth.bind(this)
  }

  componentDidMount() {
    this.setWidth(uiStores.jengaViewWidthDelta)
    this.unsubscribe = uiStores.listen(this.onUiChange)
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  onUiChange(status) {
    if (status && status.types) {
      if (status.types.includes('changeJengaViewWidthDelta')) {
        this.setWidth(status.data.jengaViewWidthDelta)
      }
    }
  }

  setWidth(delta) {
    if (this.jengaContent && this.jengaContent.current) {
      this.jengaContent.current.style.width = minWidth + delta + 'px'
    }
  }

  render() {
    return (
      <div className="jenga-panel scroll-hide-bar">
        {/* {this.props.curEventNodeList ? undefined : <JengaExtra />} */}
        <div className="jenga-content" ref={this.jengaContent}>
          {this.props.curEventNodeList ? (
            this.props.curEventNodeList.map((nodeId, index) => {
              let visibleBlockIds = this.props.filterBlockIdsMap
                ? this.props.filterBlockIdsMap[nodeId] || []
                : undefined
              return (
                <JengaItem
                  key={index}
                  eventNodeId={nodeId}
                  visibleBlockIds={visibleBlockIds}
                />
              )
            })
          ) : (
            <JengaItem />
          )}
        </div>
      </div>
    )
  }
}