import React from 'react'
import cls from 'classnames'
import newEventActions from 'actions/newEvent'
import uiActions from 'actions/ui'
import newEventStores from 'stores/newEvent'
import treeStores from 'stores/tree'
import { getEventNodeById } from 'stores/funcs/newEvent'
import { shallowEqualImmutable } from 'utils/utils'
import { CONTEXT_MENU_TYPE } from 'const/const'
import JengaCite from './JengaCite'

export default class JengaItemTitle extends React.Component {
  constructor(props) {
    super(props)
    this.curEventNodeId = newEventStores.curEventNodeId
    this.curBlockId = newEventStores.curBlockId
    this.state = {
      name: this.getName(),
      isActive: this.isActive()
    }

    this.onTreeChange = this.onTreeChange.bind(this)
    this.onEventChange = this.onEventChange.bind(this)
    this.isCurEventNodeId = this.isCurEventNodeId.bind(this)
    this.getName = this.getName.bind(this)
    this.isActive = this.isActive.bind(this)

    this.onSelectBlock = this.onSelectBlock.bind(this)
    // 右键
    this.onContextMenu = this.onContextMenu.bind(this)
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (
      !shallowEqualImmutable(this.props, nextProps) ||
      !shallowEqualImmutable(this.state, nextState)
    )
  }

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

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

  componentDidUpdate(preProps) {
    if (preProps.eventNodeId !== this.props.eventNodeId) {
      this.setState({
        name: this.getName(),
        isActive: this.isActive()
      })
    }
  }

  onTreeChange(status) {
    let obj = {}
    if (status && status.types) {
      if (status.types.includes('changeNodeUIs')) {
        if (this.curEventNodeId === status.data.nodeId) {
          let uis = status.data.uis
          if (
            Object.keys(uis).includes('name') &&
            this.state.name !== uis.name
          ) {
            obj.name = uis.name
          }
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  onEventChange(status) {
    let obj = {}
    if (status && status.types) {
      if (status.types.includes('curEventNodeId')) {
        if (this.curEventNodeId !== status.data.curEventNodeId) {
          this.curEventNodeId = status.data.curEventNodeId
          if (this.isCurEventNodeId(status.data.curEventNodeId)) {
            obj.name = this.getName()
          }
          if (this.state.isActive !== this.isActive()) {
            obj.isActive = this.isActive()
          }
        }
      }
      if (status.types.includes('curBlockId')) {
        if (this.curBlockId !== status.data.curBlockId) {
          this.curBlockId = status.data.curBlockId
          if (this.state.isActive !== this.isActive()) {
            obj.isActive = this.isActive()
          }
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  isCurEventNodeId(curEventNodeId) {
    return !this.props.eventNodeId || this.props.eventNodeId === curEventNodeId
  }

  getName() {
    let nodeId = this.props.eventNodeId || this.curEventNodeId
    if (nodeId) {
      let node = getEventNodeById(nodeId)
      if (node) {
        return node.uis.name || node.type
      }
    }
    return ''
  }

  isActive() {
    return (
      this.isCurEventNodeId(this.curEventNodeId) && this.curBlockId === null
    )
  }

  onSelectBlock() {
    if (
      this.props.eventNodeId &&
      this.props.eventNodeId !== newEventStores.curEventNodeId
    ) {
      newEventActions.selectEvent({ eventNodeId: this.props.eventNodeId })
    }
    if (!this.state.isActive) {
      newEventActions.selectBlock({ blockId: null })
    }
  }

  onContextMenu(e) {
    e.preventDefault()
    e.stopPropagation()
    this.onSelectBlock()
    let info = {
      x: e.pageX,
      y: e.pageY,
      type: CONTEXT_MENU_TYPE.EVENT
    }
    uiActions.contextMenu(info)
  }

  render() {
    return (
      <div
        className={cls('item-title-wrap f--hlc', {
          active: this.state.isActive
        })}
        onClick={this.onSelectBlock}
        onContextMenu={this.onContextMenu}
      >
        <div className="title flex-1">{this.state.name}</div>
        <JengaCite eventNodeId={this.props.eventNodeId} />
      </div>
    )
  }
}