import React from 'react'
import { is } from 'immutable'
import i18n from 'i18next'
import newEventStores from 'stores/newEvent'
import uiStore from 'stores/ui'
import { conFlags, conOperatorOps } from 'const/enum'
import { shallowEqualImmutable } from 'utils/utils'
import { getConSpecialParams } from 'src/components/common/formulaEditor/utils'

export default class ConItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      conItem: this.getConItem(props.index),
      conFlags: conFlags,
      conOperatorOptions: conOperatorOps,
      widthDelta: uiStore.jengaViewWidthDelta
    }

    this.onEventChange = this.onEventChange.bind(this)
    this.onUiChange = this.onUiChange.bind(this)

    this.onToggleEnable = this.onToggleEnable.bind(this)
    this.onChangeValue = this.onChangeValue.bind(this)
    this.onChangeFlag = this.onChangeFlag.bind(this)
    this.onChangeOperator = this.onChangeOperator.bind(this)
    this.onChangeCon = this.onChangeCon.bind(this)
    this.onAddCon = this.onAddCon.bind(this)
    this.onDeleteCon = this.onDeleteCon.bind(this)

    this.isSelectedFlag = this.isSelectedFlag.bind(this)
    this.isSelectedOperator = this.isSelectedOperator.bind(this)

    this.getConItem = this.getConItem.bind(this)
    this.getConItemFlagName = this.getConItemFlagName.bind(this)
    this.getConItemOperatorName = this.getConItemOperatorName.bind(this)
    this.getOptionName = this.getOptionName.bind(this)
  }

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

  componentDidMount() {
    this.unsubscribe = newEventStores.listen(this.onEventChange)
    this.unsubscribeUI = uiStore.listen(this.onUiChange)
  }

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

  componentDidUpdate(preProps) {
    let conItem = this.getConItem()
    if (!is(this.state.conItem, conItem) || preProps.bid !== this.props.bid) {
      this.setState({
        conItem: conItem
      })
    }
  }

  onEventChange(status) {
    let obj = {}
    if (status && status.types) {
      if (
        status.types.includes('updateBlockProp') &&
        this.props.bid === status.data.affectBlockId &&
        status.data.prop === 'cons'
      ) {
        this.forceUpdate()
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  onUiChange(status) {
    if (status && status.types) {
      if (status.types.includes('changeJengaViewWidthDelta')) {
        if (status.data.jengaViewWidthDelta !== this.state.widthDelta) {
          this.setState({
            widthDelta: status.data.jengaViewWidthDelta
          })
        }
      }
    }
  }

  onToggleEnable() {
    this.onChangeCon('enable', !this.state.conItem.enable)
  }

  onChangeValue(prop, value) {
    this.onChangeCon(prop, value, false)
  }

  onChangeFlag(option) {
    if (option && option.key) {
      let value = option.key
      this.onChangeCon('flag', value)
    }
  }

  onChangeOperator(option) {
    if (option && option.key) {
      let value = option.key
      this.onChangeCon('operator', value)
    }
  }

  onAddCon() {
    this.props.onAddBlockCon()
    this.props.onConsChange()
  }

  onDeleteCon() {
    this.props.onDelBlockCon({ index: this.props.index, resetLast: true })
    this.props.onConsChange()
  }

  onChangeCon(prop, value, forceUpdate = true) {
    let con = this.state.conItem
    con[prop] = value
    this.props.onConsChange()
  }

  isSelectedFlag(flag) {
    return this.state.conItem ? flag === this.state.conItem.flag : false
  }

  isSelectedOperator(operator) {
    return this.state.conItem ? operator === this.state.conItem.operator : false
  }

  getConItem() {
    return this.props.con || {}
  }

  getConItemFlagName() {
    return this.state.conItem && this.state.conItem.flag
      ? i18n.t('EventView.jenga_cons.' + this.state.conItem.flag)
      : ''
  }

  getConItemOperatorName() {
    return this.state.conItem && this.state.conItem.operator
      ? i18n.t('EventView.jenga_cons.' + this.state.conItem.operator)
      : ''
  }

  getOptionName(option) {
    return i18n.t('EventView.jenga_cons.' + option)
  }

  formulaExtraParams() {
    if (
      this.state.conItem &&
      ['match', 'notMatch'].indexOf(this.state.conItem.operator) >= 0
    ) {
      return getConSpecialParams()
    } else {
      return undefined
    }
  }

  render() {
    return null
  }
}