text: import PropTypes from 'prop-types'
  import React from 'react'
  
  class Controls extends React.Component {
  
    static propTypes = {
      active: PropTypes.string,
      children: PropTypes.any,
      entity: PropTypes.object,
      hover: PropTypes.string,
      mode: PropTypes.string,
      pageType: PropTypes.string,
      prefix: PropTypes.string,
      type: PropTypes.string,
      onAction: PropTypes.func
    }
  
    _handleMouseEnter = this._handleMouseEnter.bind(this)
    _handleMouseLeave = this._handleMouseLeave.bind(this)
  
    render() {
      const { children, entity, mode } = this.props
      if(mode !== 'design') {
        return (
          <div className={ this._getClass() }>
            { children }
          </div>
        )
      }
      return (
        <div { ...this._getEntity() }>
          { children }
          <div className="controls">
            <div className="controls-inner">
              { entity.entity === 'block' &&
                <div className="controls-buttons">
                  { entity.datasource === 'dynamic' ?
                    <>
                      <div className="controls-button" onClick={ this._handleAction.bind(this, 'dynamic') }>
                        <i className="fa fa-database" />
                      </div>
                      <div className="controls-button" onClick={ this._handleAction.bind(this, 'edit') }>
                        <i className="fa fa-file" />
                      </div>
                      <div className="controls-button" onClick={ this._handleAction.bind(this, 'edit') }>
                        <i className="fa fa-ban" />
                      </div>
                    </> :
                    <>
                      <div className="controls-button" onClick={ this._handleAction.bind(this, 'edit') }>
                        <i className="fa fa-pencil" />
                      </div>
                    </>
                  }
                  { this._canRemove() &&
                    <div className="controls-button" onClick={ this._handleAction.bind(this, 'remove') }>
                      <i className="fa fa-trash-o" />
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        </div>
      )
    }
  
    _canEdit() {
      const { entity, pageType } = this.props
      return entity.entity === 'block' && (pageType === 'template' || _.includes(entity.rules, 'content'))
    }
  
    _canRemove() {
      const { entity, pageType } = this.props
      return pageType === 'template' || _.includes(entity.rules, 'remove')
    }
  
    _getClass() {
      const { active, hover, entity } = this.props
      const classes = [entity.entity === 'template' ? 'page' : entity.entity]
      if(entity.id === active) classes.push('active')
      if(entity.id === hover) classes.push('hover')
      return classes.join(' ')
    }
  
    _getEntity() {
      return {
        className: this._getClass(),
        ...this._canEdit() ? {
          onMouseOver: this._handleMouseEnter,
          onMouseLeave: this._handleMouseLeave
        } : {}
      }
    }
  
    _handleAction(action) {
      const { entity, type } = this.props
      const id = entity ? entity.id : null
      this.props.onAction(action, { id, type })
    }
  
    _handleMouseEnter(e) {
      const { entity } = this.props
      const hover = entity ? entity.id : null
      e.stopPropagation()
      this.props.onAction('hover', { hover })
    }
  
    _handleMouseLeave(e) {
      e.stopPropagation()
      this.props.onAction('hover', { hover: null })
    }
  
  }
  
  export default Controls
  