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

export default observer class TableView extends Component
  # props
  # tableHeaderRowProps: Object
  # rows: Array
  # columns: Array
  # getRowBackroundColor: Func
  #
  # withHeaderRow 관련
  # tableHeaderRowComponent: Element
  #
  # withResizing 관련
  # tableColumnResizingComponent: Element
  #
  # withSorting 관련
  # sortingStateComponent: Element
  # integratedSortingComponent: Element

  # withFiltering 관련
  # filteringStateComponent: Element
  # integratedFilteringComponent: Element
  # tableFilterRowComponent: Element
  #
  # withSelection 관련
  # selectionStateComponent: Element
  # integratedSelectionComponent: Element
  # tableSelectionComponent: Element
  #
  # withReordering 관련
  # dragDropProviderComponent: Element
  # tableColumnReorderingComponent: Element
  #
  # withColumnVisivility 관련
  # tableColumnVisibilityComponent: Element
  # toolbarComponent: Element
  # columnChooserComponent: Element
  #
  # withDetailRow 관련
  # rowDetailStateComponent: Element
  # tableRowDetailComponent: Element

  @defaultProps:
    getRowBackroundColor: =>

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

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

  Cell: (props) =>
    textAlign = props.column.textAlign or 'left'

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

    else if props.column.type is 'button'
      <Table.Cell {...props}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          { props.column.buttons.map (button) =>
            <Button size="mini" {...button} onClick={=> button.onClick props.row}>{ button.text }</Button>
            }
        </div>
      </Table.Cell>

    else if props.column.type is 'custom'
      <Table.Cell {...props}>
        <props.column.component value={props.value} column={props.column} row={props.row} />
      </Table.Cell>

    else if props.column.type is 'price'
      <Table.Cell {...props}>
        <div style={{ textAlign: 'right' }}>{ Utils.getFormattedPrice props.value }</div>
      </Table.Cell>

    else if props.column.type is 'number'
      <Table.Cell {...props}>
        <div style={{ textAlign: 'right' }}>{ props.value }</div>
      </Table.Cell>

    else if props.column.type is 'date'
      <Table.Cell {...props}>
        <div style={{ textAlign: 'center' }}>{ moment(props.value).format 'YYYY-MM-DD' }</div>
      </Table.Cell>

    else if props.column.type is 'bool'
      <Table.Cell {...props}>
        <div style={{ textAlign: 'center' }}>{ if props.value then 'O' else 'X' }</div>
      </Table.Cell>

    else if props.column.type is 'string'
      <Table.Cell {...props}>
        <div style={{ textAlign: textAlign }}>{ props.value }</div>
      </Table.Cell>

  getValue: () =>


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

    columns.forEach (column) =>
      if /\./.test column.name
        column.getCellValue = (row) =>
          eval "row.#{column.name}"

    <Grid
      rows={@props.rows}
      columns={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 }
      { @props.tableHeaderRowComponent }
      { @props.tableFilterRowComponent }
      { @props.tableSelectionComponent }
      { @props.tableRowDetailComponent }
      { @props.tableColumnVisibilityComponent }
      { @props.toolbarComponent }
      { @props.columnChooserComponent }
    </Grid>