import React from 'react'
import cls from 'classnames'
import i18n from 'i18next'
import newEventStores from 'stores/newEvent'
import treeStores from 'stores/tree'
import {
  nodeIsDyTransaction,
  nodeIsFunctionGroup,
  nodeIsIotMessage,
  nodeIsNormalService,
  nodeIsTimerService,
  nodeIsTransaction
} from 'stores/funcs/nodeType'
import { getEventNodeById } from 'stores/funcs/newEvent'
import JengaDebugBtn from './debug/JengaDebugBtn'
import LogBtn from 'src/components/common/serviceLogView/LogBtn'
import JengaNavNavigateNodes from './JengaNavNavigateNodes'

export default class JengaNavInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      curEventNodeId: newEventStores.curEventNodeId,
      type: this.getType(newEventStores.curEventNodeId),
      curClassId: treeStores.curClassId
    }

    this.onEventChange = this.onEventChange.bind(this)
    this.onTreeChange = this.onTreeChange.bind(this)
    this.getType = this.getType.bind(this)
    this.getInfo = this.getInfo.bind(this)
  }

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

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

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

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

  getType(nodeId) {
    let type = null
    let node = getEventNodeById(nodeId)
    if (node) {
      if (nodeIsTimerService(node.type)) {
        type = 'timer'
      } else if (nodeIsTransaction(node.type)) {
        type = 'transaction'
      } else if (nodeIsDyTransaction(node.type)) {
        type = 'dyTransaction'
      } else if (nodeIsIotMessage(node.type)) {
        type = 'iotMessage'
      } else if (nodeIsNormalService(node.type)) {
        type = 'service'
      } else if (nodeIsFunctionGroup(node.type)) {
        type = 'funcGroup'
      }
    }
    return type
  }

  getInfo() {
    let { curClassId } = this.state
    if (this.props.curEventNodeList) {
      return null
    }
    switch (this.state.type) {
      case 'service':
      case 'timer':
      case 'transaction':
      case 'dyTransaction':
        return (
          <div
            className={cls('title', {
              'f--hlc': ['service', 'timer'].indexOf(this.state.type) >= 0
            })}
          >
            {i18n.t('EventView.jenga_nav.' + this.state.type + 'Id')}
            <span>{this.state.curEventNodeId}</span>
            {['service', 'timer'].indexOf(this.state.type) >= 0 ? (
              <>
                {!curClassId && (
                  <>
                    <JengaDebugBtn nodeId={this.state.curEventNodeId} />
                    <LogBtn />
                  </>
                )}
              </>
            ) : null}
          </div>
        )
      case 'iotMessage':
        return (
          <div className={cls('title f--hlc')}>
            {<LogBtn className={'btn-iot-log'} />}
          </div>
        )
      default:
        return null
    }
  }

  render() {
    return (
      <div className="jenga-nav-info f--hlc flex-1">
        {this.getInfo()}
        <JengaNavNavigateNodes />
      </div>
    )
  }
}