import { Grid, Table, TableHeaderRow } from '@devexpress/dx-react-grid-material-ui'
import { Button } from 'semantic-ui-react'

export default observer class TableView extends Component
  @propTypes:
    tableHeaderRowProps: PropTypes.object.isRequired
    rows: PropTypes.array.isRequired
    columns: PropTypes.array.isRequired
    getRowBackroundColor: PropTypes.func

    # withResizing 관련
    tableColumnResizingComponent: PropTypes.element.isRequired

    # withSorting 관련
    sortingStateComponent: PropTypes.element.isRequired
    integratedSortingComponent: PropTypes.element.isRequired

    # withFiltering 관련
    filteringStateComponent: PropTypes.element.isRequired
    integratedFilteringComponent: PropTypes.element.isRequired
    tableFilterRowComponent: PropTypes.element.isRequired

    # withSelection 관련
    selectionStateComponent: PropTypes.element.isRequired
    integratedSelectionComponent: PropTypes.element.isRequired
    tableSelectionComponent: PropTypes.element.isRequired

    # withReordering 관련
    dragDropProviderComponent: PropTypes.element.isRequired
    tableColumnReorderingComponent: PropTypes.element.isRequired

    # withColumnVisivility 관련
    tableColumnVisibilityComponent: PropTypes.element.isRequired
    toolbarComponent: PropTypes.element.isRequired
    columnChooserComponent: PropTypes.element.isRequired

    # withDetailRow 관련
    rowDetailStateComponent: PropTypes.element.isRequired
    tableRowDetailComponent: PropTypes.element.isRequired

  @defaultProps:
    getRowBackroundColor: =>

  Row: (props) =>
    backgroundColor = @props.getRowBackroundColor props.row

    <Table.Row {...props} style={{ backgroundColor: backgroundColor }} />

  Cell: (props) =>
    if not props.column.onClick
      if props.column.type isnt 'button'
        if props.column.type isnt 'custom'
          <Table.Cell {...props} />

        else
          <Table.Cell {...props}>
            { <props.column.component value={props.value} column={props.column} row={props.row} /> }
          </Table.Cell>

      else
        <Table.Cell {...props}>
          { props.column.buttons.map (button) =>
            <Button size="mini" {...button} onClick={=> button.onClick props.row}>{ button.text }</Button>
            }
        </Table.Cell>

    else
      <Table.Cell {...props}>
        <a onClick={=> props.column.onClick props.row} style={{ cursor: 'pointer' }}>{ props.value }</a>
      </Table.Cell>

  render: =>
    rows = _.cloneDeep @props.rows

    rows.forEach (row) =>
      @props.columns.forEach (column) =>
        if column.type is 'date'
          row[column.name] = moment(row[column.name]).format 'YYYY-MM-DD'

        else if column.type is 'bool'
          row[column.name] = if row[column.name] then 'O' else 'X'

    <Grid
      rows={rows}
      columns={@props.columns}
    >
      { @props.sortingStateComponent }
      { @props.integratedSortingComponent }
      { @props.filteringStateComponent }
      { @props.integratedFilteringComponent }
      { @props.selectionStateComponent }
      { @props.integratedSelectionComponent }
      { @props.rowDetailStateComponent }
      { @props.dragDropProviderComponent }
      <Table cellComponent={@Cell} rowComponent={@Row}  />
      { @props.tableColumnReorderingComponent }
      { @props.tableColumnResizingComponent }
      <TableHeaderRow {...@props.tableHeaderRowProps} />
      { @props.tableFilterRowComponent }
      { @props.tableSelectionComponent }
      { @props.tableRowDetailComponent }
      { @props.tableColumnVisibilityComponent }
      { @props.toolbarComponent }
      { @props.columnChooserComponent }
    </Grid>