import { Component } from 'react'
import factory from '../factory'
import Header from './header'
import Body from './body'

export default class Table extends Component {
  constructor(props) {
    super()

    this.state = {
      sortedRows: props.property.rows.slice(),
      currentColumnIndex: null,
      descending: false,
    }
  }

  render() {
    return (
      <div className='ct-table-container'>
        <label className='ct-element-label ct-table-label'>{this.props.property.title}</label>
        <table className='ct-table'>
          <Header
            descending={this.state.descending}
            sortedColumn={this.state.currentColumnIndex}
            columns={this.props.property.columns}
            sortBy={index => this.sortBy(index)} />
          <Body rows={this.state.sortedRows} />
        </table>
      </div>)
  }

  sortBy(columnIndex) {
    const rowsToSort = this.state.sortedRows
    let sorted = rowsToSort.sort((row1, row2) => {
      if (this.getRowValue(row1, columnIndex) > this.getRowValue(row2, columnIndex)) return 1
      if (this.getRowValue(row1, columnIndex) < this.getRowValue(row2, columnIndex)) return -1
      return 0
    })

    if (this.state.currentColumnIndex == columnIndex && !this.state.descending) {
      sorted = sorted.reverse()
    }

    this.setState({
      sortedRows: sorted,
      descending: this.state.currentColumnIndex == columnIndex ? !this.state.descending : false,
      currentColumnIndex: columnIndex,
    })
  }

  getRowValue(row, columnIndex) {
    if (row[columnIndex].type == 'html') {
      const regex = /(<([^>]+)>)/ig
      return row[columnIndex].content.replace(regex, '')
    }

    if (row[columnIndex].type == 'number') {
      return parseFloat(row[columnIndex].value)
    }

    if (row[columnIndex].type == 'date' || row[columnIndex].type == 'datetime') {
      return new Date(row[columnIndex].value)
    }

    if (row[columnIndex].type == 'boolean') {
      return row[columnIndex].value.toLowerCase() === 'true'
    }
    
    return row[columnIndex].value && row[columnIndex].value.toLowerCase()
  }
}


@@ -223,55 +223,8 @@
 = %7B%0A
-      sortedRows: props.property.rows.slice(),%0A
     
@@ -296,24 +296,68 @@
  render() %7B%0A
+    const sortedRows = this.getSortedRows()%0A
     return (
@@ -739,21 +739,30 @@
 %3E this.s
-ortBy
+etSortingState
 (index)%7D
@@ -787,27 +787,16 @@
 y rows=%7B
-this.state.
 sortedRo
@@ -841,21 +841,30 @@
   %7D%0A%0A  s
-ortBy
+etSortingState
 (columnI
@@ -879,620 +879,744 @@
     
-const rowsToSort = this.state.sortedRows%0A    let sorted = rowsToSort.sort((row1, row2) =%3E %7B%0A      if (this.getRowValue(row1, columnIndex) %3E this.getRowValue(row2, columnIndex)) return 1%0A      if (this.getRowValue(row1, columnIndex) %3C this.getRowValue(row2, columnIndex)) return -1%0A      return 0%0A    %7D)%0A%0A    if (this.state.currentColumnIndex == columnIndex && !this.state.descending) %7B%0A      sorted = sorted.reverse()%0A    %7D%0A%0A    this.setState(%7B%0A      sortedRows: sorted,%0A      descending: this.state.currentColumnIndex == columnIndex ? !this.state.descending : false,%0A      currentColumnIndex: columnIndex,%0A    %7D
+this.setState(%7B%0A      descending: this.state.currentColumnIndex == columnIndex ? !this.state.descending : false,%0A      currentColumnIndex: columnIndex,%0A    %7D)%0A  %7D%0A%0A  getSortedRows() %7B%0A    const columnIndex = this.state.currentColumnIndex%0A    const rowsToSort = this.props.property.rows.slice()%0A%0A    if (columnIndex == null %7C%7C columnIndex == undefined) %7B%0A      return rowsToSort%0A    %7D%0A%0A    const sorted = rowsToSort.sort((row1, row2) =%3E %7B%0A      if (this.getRowValue(row1, columnIndex) %3E this.getRowValue(row2, columnIndex)) return 1%0A      if (this.getRowValue(row1, columnIndex) %3C this.getRowValue(row2, columnIndex)) return -1%0A      return 0%0A    %7D)%0A%0A    if (this.state.descending) %7B%0A      return sorted%0A    %7D%0A%0A    return sorted.reverse(
 )%0A  
@@ -2143,20 +2143,16 @@
 '%0A    %7D%0A
-    
 %0A    ret
@@ -2224,9 +2224,8 @@
 )%0A  %7D%0A%7D%0A
-%0A

fix state issue in tables