import React from 'react'
import i18n from 'i18next'
import { message } from 'antd'
import TextareaAutosize from 'react-autosize-textarea'
import newEventActions from 'actions/newEvent'
import newEventStores from 'stores/newEvent'
import { getEventBlockByBid } from 'stores/funcs/newEvent'
import { BLOCK_OP_TYPE } from 'const/const'
import { copyToClipboard } from 'utils/commons/copyToClipboard'
import { shallowEqualImmutable } from 'utils/utils'

export default class BlockCommentWrap extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showComment: newEventStores.showComment,
      comment: this.getComment()
    }

    this.onEventChange = this.onEventChange.bind(this)
    this.getComment = this.getComment.bind(this)
    this.copy = this.copy.bind(this)
    this.onChange = this.onChange.bind(this)
    this.onBlur = this.onBlur.bind(this)
  }

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

  componentDidMount() {
    this.unsubscribe = newEventStores.listen(this.onEventChange)
    let { changeShowComment } = this.props
    let { showComment } = this.state
    changeShowComment && changeShowComment(showComment)
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  componentDidUpdate(preProps) {
    if (preProps.bid !== this.props.bid) {
      this.setState({
        comment: this.getComment()
      })
    }
  }

  onEventChange(status) {
    let obj = {}
    if (status && status.types) {
      if (status.types.includes('changeShowComment')) {
        let { showComment } = this.state
        if (showComment !== status.data.showComment) {
          obj.showComment = status.data.showComment
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj, () => {
        let { changeShowComment } = this.props
        let { showComment } = this.state
        changeShowComment && changeShowComment(showComment)
      })
    }
  }

  getComment() {
    let result = ''
    let nodeId = this.props.eventNodeId || newEventStores.curEventNodeId
    let block = getEventBlockByBid(this.props.bid, nodeId)
    if (block && block.op === BLOCK_OP_TYPE.NOP) {
      result = block.val || ''
    }
    return result
  }

  copy() {
    copyToClipboard(this.state.comment)
    message.success(i18n.t('EventView.jenga_log.copy.success'), 1)
  }

  onChange(e) {
    let value = e && e.target ? e.target.value : e
    this.setState({
      comment: value
    })
  }

  onBlur() {
    if (this.getComment() !== this.state.comment) {
      let nodeId = this.props.eventNodeId || newEventStores.curEventNodeId
      newEventActions.updateBlockProp({
        nodeId,
        blockId: this.props.bid,
        prop: 'val',
        value: this.state.comment
      })
    }
  }

  render() {
    let { comment } = this.state
    return (
      <div className="comment-wrap">
        {!this.state.showComment ? (
          <div className="zip-wrap" />
        ) : (
          <div className="input-wrap f--h">
            <button className="btn-clear btn-icon" onClick={this.copy} />
            <div className="input-area f--hlc">
              <TextareaAutosize
                value={comment || ''}
                placeholder={'备注详情'}
                onChange={this.onChange}
                onBlur={this.onBlur}
                className={'comment-textarea'}
                maxRows={4}
                async={true}
              />
            </div>
          </div>
        )}
      </div>
    )
  }
}