import React from 'react'
import cls from 'classnames'
import i18n from 'i18next'
import { InputNumber } from 'antd'
import onClickOutside from 'react-onclickoutside'
import newEventActions from 'actions/newEvent'
import newEventStores from 'stores/newEvent'
import { getEventNodeById, getEventBlockByBid } from 'stores/funcs/newEvent'
import { isServerRootNode } from 'stores/funcs/event/methodUtils'
import { shallowEqualImmutable } from 'utils/utils'
import iconStrObj from 'src/assets/icons/iconsStr'

class BlockActionDelay extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showPopUp: false,
      delayTime: this.getTime()
    }

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

    this.delayInput = React.createRef()
    this.getTime = this.getTime.bind(this)
    this.onFocus = this.onFocus.bind(this)
    this.onChange = this.onChange.bind(this)
    this.showPopUp = this.showPopUp.bind(this)
    this.showDelay = this.showDelay.bind(this)
  }

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

  componentWillUnmount() {
    this.unsubscribe()
  }

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

  componentDidUpdate(preProps) {
    if (preProps.bid !== this.props.bid) {
      this.setState({
        showPopUp: false,
        delayTime: this.getTime()
      })
    }
  }

  onEventChange(status) {
    if (
      status.types.includes('updateBlockProp') &&
      this.props.bid === status.data.affectBlockId &&
      status.data.prop === 'delay'
    ) {
      this.onChange(this.getTime(), true)
    }
  }

  getTime() {
    let nodeId = this.props.eventNodeId || newEventStores.curEventNodeId
    let block = getEventBlockByBid(this.props.bid, nodeId)
    return block.delay || 0
  }

  onFocus(e) {
    e.target.select()
  }

  onChange(value, stopUpdateInStore) {
    let result = value
    if (value === '') {
      result = 0
    } else if (!isNaN(value)) {
      result = parseFloat(value) || 0
    } else {
      result = this.state.delayTime || 0
    }
    if (result !== this.state.delayTime) {
      this.setState(
        {
          delayTime: result
        },
        () => {
          if (!stopUpdateInStore) {
            let nodeId = this.props.eventNodeId || newEventStores.curEventNodeId
            newEventActions.updateBlockProp({
              nodeId,
              blockId: this.props.bid,
              prop: 'delay',
              value: result
            })
          }
          this.props.changeDelay && this.props.changeDelay()
        }
      )
    }
  }

  showPopUp() {
    this.setState(
      {
        showPopUp: !this.state.showPopUp
      },
      () => {
        if (
          this.state.showPopUp &&
          this.delayInput &&
          this.delayInput.current
        ) {
          this.delayInput.current.inputNumberRef.input.select()
        }
      }
    )
  }

  handleClickOutside(evt) {
    this.setState({
      showPopUp: false
    })
  }

  showDelay() {
    let nodeId = this.props.eventNodeId || newEventStores.curEventNodeId
    let isServer = isServerRootNode(getEventNodeById(nodeId))
    return !isServer
  }

  render() {
    return (
      <div className={cls('action-delay f--h', { hidden: !this.showDelay() })}>
        <button
          className="btn-clear btn-action-delay"
          onClick={this.showPopUp}
          dangerouslySetInnerHTML={{ __html: iconStrObj.delayIcon }}
        />
        {this.state.showPopUp ? (
          <div className="action-delay-popup">
            <div className="delay-title">
              {i18n.t('EventView.jenga_action_block.delaySetting')}
            </div>
            <div className="delay-input-wrap">
              <InputNumber
                ref={this.delayInput}
                min={0}
                className="normal"
                value={this.state.delayTime}
                onChange={this.onChange}
                onFocus={this.onFocus}
              />
            </div>
          </div>
        ) : null}
      </div>
    )
  }
}

export default onClickOutside(BlockActionDelay)