text: import Linkable from '../linkable'
  import PropTypes from 'prop-types'
  import Controls from './controls'
  import Entity from './entity'
  import React from 'react'
  
  class Row extends React.Component {
  
    static propTypes = {
      active: PropTypes.string,
      data: PropTypes.object,
      entity: PropTypes.object,
      hover: PropTypes.string,
      mode: PropTypes.string,
      page: PropTypes.object,
      pageType: PropTypes.string,
      prefix: PropTypes.string,
      website: PropTypes.object,
      onAction: PropTypes.func,
      onHighlight: PropTypes.func
    }
  
    render() {
      const { entity } = this.props
      return (
        <Linkable { ...this._getLinkable() }>
          <div className="row-position">
            <Controls { ...this._getControls() }>
              <div className="row-box">
                <div className="row-columns">
                  { entity.content.children.map((child, index) => (
                    <Entity { ...this._getEntity(child, index) } key={`child_${index}`} />
                  ))}
                </div>
              </div>
            </Controls>
          </div>
        </Linkable>
      )
    }
  
    _getControls() {
      const { active, entity, hover, mode, pageType, prefix, onAction, onHighlight } = this.props
      return {
        active,
        entity,
        hover,
        mode,
        pageType,
        prefix,
        type: 'row',
        onAction,
        onHighlight
      }
    }
  
    _getEntity(entity, index) {
      const { active, data, hover, mode, page, pageType, prefix, website, onAction, onHighlight } = this.props
      return {
        active,
        data,
        entity,
        hover,
        mode,
        page,
        pageType,
        prefix: `${prefix}.content.columns[${index}]`,
        website,
        widths: this._getWidths(index),
        onAction,
        onHighlight
      }
    }
  
    _getLinkable() {
      const { data, entity, mode, page, website } = this.props
      return {
        data,
        entity,
        mode,
        page,
        website
      }
    }
  
    _getWidths(cindex) {
      const { entity } = this.props
      const { customWidth } = entity.styles
      const { layout } = entity.content
      const fullWidth = customWidth || 980
      return layout.isResponsive ? {
        desktop: this._getDeviceWidth('desktop', fullWidth, cindex),
        tablet: this._getDeviceWidth('tablet', 979, cindex),
        mobile: this._getDeviceWidth('mobile', 767, cindex)
      } : {
        all: this._getDeviceWidth('all', fullWidth, cindex)
      }
    }
  
    _getDeviceWidth(device, fullWidth, cindex) {
      const { entity } = this.props
      const layout = entity.content.layout[device] || entity.content.layout
      const index = cindex % layout.length
      return Math.floor((fullWidth / 12) * layout[index])
    }
  
  }
  
  export default Row
  