import React from 'react'
import cls from 'classnames'
import { shallowEqualImmutable } from 'src/utils/utils'
import citeActions from 'actions/cite'
import citeStores from 'stores/cite'
import newEventStores from 'stores/newEvent'

export default class JengaCite extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      eventPanelMode: newEventStores.eventPanelMode,
      curEventNodeId: newEventStores.curEventNodeId,
      isActive: false, // 是否处于引用激活态
      memoExpanded: newEventStores.showMemo // 备注是否展开
    }

    this.getIsActive = this.getIsActive.bind(this)
    this.onEventChange = this.onEventChange.bind(this)
    this.onCiteChange = this.onCiteChange.bind(this)
    this.onToggleJengaCite = this.onToggleJengaCite.bind(this)
  }

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

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

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

  componentDidUpdate(preProps) {
    let isActive = this.getIsActive()
    if (this.state.isActive !== isActive) {
      this.setState({
        isActive: isActive
      })
    }
  }

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

  onCiteChange(status) {
    let obj = {}
    if (status.types.includes('activeJengaCite')) {
      obj.isActive = status.data.eventNodeId === this.props.eventNodeId
    }
    if (
      status.types.includes('deactiveCite') ||
      status.types.includes('activeEventsCited') ||
      status.types.includes('activePropsCite') ||
      status.types.includes('activeBlockCite')
    ) {
      obj.isActive = false
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  getIsActive() {
    return (
      citeStores.curCite &&
      citeStores.curCite.eventNodeId === this.props.eventNodeId &&
      citeStores.curCite.type === 'jengaCite'
    )
  }

  onToggleJengaCite() {
    let curNodeId = this.props.eventNodeId || this.state.curEventNodeId
    if (this.state.isActive) {
      citeActions.deactiveAllCite({})
    } else {
      citeActions.activeJengaCite({
        eventNodeId: curNodeId
      })
    }
  }

  render() {
    return this.state.eventPanelMode === 'citedJengas' ? (
      <button
        className={cls('btn-clear btn-jenga-cite', {
          active: this.state.isActive,
          'memo-expanded': this.state.memoExpanded
        })}
        onClick={this.onToggleJengaCite}
      />
    ) : null
  }
}