import React from 'react'
import newEventActions from 'actions/newEvent'
import { shallowEqualImmutable } from 'utils/utils'

export default class BlockDel extends React.Component {
  constructor(props) {
    super(props)

    this.onDelBlock = this.onDelBlock.bind(this)
  }

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

  onDelBlock(e) {
    e.stopPropagation()
    newEventActions.deleteBlock({ blockId: this.props.bid })
  }

  getStyle() {
    return {
      left: -(8 + this.props.layer * 20 + (this.props.layer + 1)) - 38 + 'px'
    }
  }

  render() {
    return this.props.isActive ? (
      <button
        className="btn-clear btn-block-del"
        style={this.getStyle()}
        onClick={this.onDelBlock}
      />
    ) : null
  }
}