import { RowDetailState } from '@devexpress/dx-react-grid'
import { TableRowDetail } from '@devexpress/dx-react-grid-material-ui'
import Utils from '../Utils/Utils.coffee'

export default withDetailRow = (WrappedComponent) =>
  observer class WithDetailRow extends Component
    constructor: (props) ->
      super props

      mainColumnName = ''

      props.columns.forEach (column) =>
        if column.isMain
          mainColumnName = column.name

      @state = observable
        mainColumnName: mainColumnName

    renderDetailRows: (row) =>
      _.map row, (value, key) =>
        if key isnt @state.mainColumnName
          column = @props.columns.find (column) =>
            column.name is key

          <div>{ column.title } : { value }</div>

    RowDetail: (props) =>
      <div style={{ paddingLeft: 90 }}>{ @renderDetailRows(props.row) }</div>

    render: =>
      if Utils.isMobile()
        <WrappedComponent
          {...@props}
          rowDetailStateComponent={<RowDetailState />}
          tableRowDetailComponent={<TableRowDetail contentComponent={@RowDetail} />}
        />

      else
        <WrappedComponent {...@props} />