import React from 'react'
import { Menu, Dropdown } from 'antd'
import i18n from 'i18next'
import cls from 'classnames'
import newEventActions from 'actions/newEvent'
import newEventStores from 'stores/newEvent'
import { getEventBlockByBid } from 'stores/funcs/newEvent'
import { shallowEqualImmutable } from 'utils/utils'
import { loopOptions } from 'const/enum'
import { BLOCK_LOOP_TYPE } from 'const/const'
import BlockEnable from '../BlockEnable'

const MenuItem = Menu.Item

export default class BlockLoopOption extends React.Component {
  constructor(props) {
    super(props)
    this.curEventNodeId = newEventStores.curEventNodeId
    this.state = {
      option: this.getLoopOption(props.bid)
    }

    this.onEventChange = this.onEventChange.bind(this)
    this.getLoopOption = this.getLoopOption.bind(this)
    this.getOptionName = this.getOptionName.bind(this)
    this.onSelectOption = this.onSelectOption.bind(this)
    this.loopOptions = this.loopOptions.bind(this)
  }

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

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

  componentWillUnmount() {
    this.unsubscribe()
  }

  componentDidUpdate(preProps) {
    if (preProps.bid !== this.props.bid) {
      this.setState({
        option: this.getLoopOption()
      })
    }
  }

  onEventChange(status) {
    let obj = {}
    if (status && status.types) {
      if (
        status.types.includes('curEventNodeId') &&
        this.curEventNodeId !== status.data.curEventNodeId
      ) {
        this.curEventNodeId = status.data.curEventNodeId
      }
      if (
        status.types.includes('updateBlockProp') &&
        this.props.bid === status.data.affectBlockId &&
        status.data.prop === 'op'
      ) {
        let option = this.getLoopOption()
        if (this.state.option !== option) {
          obj.option = option
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj)
    }
  }

  getLoopOption(bid) {
    let _bid = bid || this.props.bid
    let nodeId = this.props.eventNodeId || this.curEventNodeId
    let block = getEventBlockByBid(_bid, nodeId)
    if (block) {
      return block.op || BLOCK_LOOP_TYPE.FOR
    }
    return BLOCK_LOOP_TYPE.FOR
  }

  getOptionName() {
    let option = this.state.option
    return i18n.t('EventView.jenga_loop_block.' + option)
  }

  onSelectOption(result) {
    if (result) {
      let option = result.key
      this.setState(
        {
          option: option
        },
        () => {
          newEventActions.updateBlockProp({
            blockId: this.props.bid,
            prop: 'op',
            value: option,
            trigger: true,
            addRecord: true
          })
        }
      )
    }
  }

  loopOptions() {
    return loopOptions.slice(0, 2)
  }

  render() {
    let loopOptsMenu = () => {
      let curLoopOptions = this.loopOptions()
      return (
        <Menu className="loop-option-menu" onClick={this.onSelectOption}>
          {!curLoopOptions || curLoopOptions.length === 0
            ? null
            : curLoopOptions.map(opt => {
                return (
                  <MenuItem
                    key={opt}
                    className={cls({
                      selected: this.state.option === opt
                    })}
                  >
                    {i18n.t('EventView.jenga_loop_block.' + opt)}
                  </MenuItem>
                )
              })}
        </Menu>
      )
    }

    return (
      <div className="loop-option f--hlc">
        <BlockEnable
          bid={this.props.bid}
          isEnable={this.props.isEnable}
          eventNodeId={this.props.eventNodeId}
        />
        <Dropdown
          trigger={['click']}
          getPopupContainer={triggerNode => triggerNode.parentNode}
          overlayClassName={'loop-option-dropdown'}
          overlay={loopOptsMenu()}
        >
          <div className="loop-select f--hlc">
            <input
              value={this.getOptionName()}
              readOnly={true}
              className="ant-dropdown-input"
              placeholder={i18n.t('EventView.jenga_loop_block.selectLoop')}
            />
            <div className="ant-dropdown-icon" />
          </div>
        </Dropdown>
      </div>
    )
  }
}