/**
 * Created by clstrfvck on 10/06/2017.
 */
import React, { Component } from 'react'
import TableRow from './TableRow'
import Pagination from './Pagination'
const css = require("./Table.scss");

export default class Table extends Component {
    constructor(props) {
        super(props)
        this.tableMetaData = {kogus:0,summa:0}
        this.entriesPerPage = 5;
        this.splitRows = this.splitRows.bind(this)
        this.pages = [];
    }

    componentWillMount() {
        //Dynamically calculates the total sums of amounts + values in provided array
        this.tableMetaData = this.props.tableData.reduce(
            ({kogus, summa}, row)=>{
                return {
                    kogus: parseInt(kogus) + parseInt(row.kogus),
                    summa: parseInt(summa) + parseInt(row.summa)
                }
            }, {kogus:0, summa:0});
        this.splitRows();

    }

    splitRows() {
        let pageCount = Math.ceil(this.props.tableData.length/this.entriesPerPage)
        for(let i=0;i<pageCount; i++){
            let tableLength = this.props.tableData.length
            let perPage = tableLength<this.entriesPerPage ? tableLength : this.entriesPerPage
            let max = tableLength < (i+1)*perPage ? tableLength % (perPage*i) : perPage
            let temp = this.props.tableData.slice(i*perPage, (i*perPage)+max)
            this.pages.push(temp)
        }
    }


    handleRowClick(id) {
        //Receives click events from table rows with an ID (currently, name of veoseleht).
        //Placeholder for Something Nice™
        console.log(`row with the ID of "${id}" was clicked.`)
    }

    render() {
        console.log(this.pages.length);
        return(
            <div className="Table__wrapper">
                <table className="Table" cellSpacing={0}>
                    <thead>
                        <tr><th className="Table__column"/>
                            <th className="Table__column wide"/>
                            <th className="Table__column narrow" >kogus/tm</th>
                            <th className="Table__column narrow">summa/€</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr className={`Table__header ${this.props.status ? this.props.status : 'default'}`}>
                        <td className="TableRow__column"> Kuupäev</td>
                        <td className="TableRow__column"/>
                        <td className="TableRow__column">{this.tableMetaData.kogus}</td>
                        <td className="TableRow__column">{this.tableMetaData.summa}</td></tr>
                        {
                            this.pages[this.props.currentPage-1].map((row, index) => {
                            return (
                                <TableRow
                                    key={index}
                                    kuupäev={row.kuupäev}
                                    veoseleht={row.veoseleht}
                                    kogus={row.kogus}
                                    summa={row.summa}
                                    handleClick={this.handleRowClick}
                                />
                            )
                        })}
                    </tbody>
                </table>
                {this.pages.length>1 ?
                <Pagination
                    totalCount={this.pages.length}
                    currentlyActive={this.props.currentPage}
                    arrowClicked={this.props.arrowClicked}
                    numberClicked={this.props.numberClicked}
                /> : null}
            </div>
        )
    }
}
@@ -440,22 +440,82 @@
 s = %5B%5D;%0A
+        this.state = %7B%0A            currentPage: 1%0A        %7D%0A
     %7D%0A
-
 %0A    com
@@ -953,24 +953,451 @@
 ws();%0A%0A    %7D
+%0A    numberClicked(number) %7B%0A        this.setState(%7BcurrentPage: number%7D)%0A    %7D%0A    arrowClicked(current, total, dir) %7B%0A        console.log(current,total,dir);%0A        let currentPage = current%0A        let totalCount = total //placeholder%0A        let newPage = dir === 'left' ? currentPage-1 : currentPage +1;%0A        if(newPage %3E= 1 && newPage %3C= totalCount) %7B%0A            this.setState(%7BcurrentPage: newPage%7D)%0A        %7D%0A    %7D
 %0A%0A    splitR
@@ -3181,29 +3181,29 @@
 .pages%5Bthis.
-props
+state
 .currentPage
@@ -3651,16 +3651,27 @@
 RowClick
+.bind(this)
 %7D%0A      
@@ -3971,21 +3971,21 @@
 e=%7Bthis.
-props
+state
 .current
@@ -4029,22 +4029,16 @@
 d=%7Bthis.
-props.
 arrowCli
@@ -4037,24 +4037,35 @@
 arrowClicked
+.bind(this)
 %7D%0A          
@@ -4094,22 +4094,16 @@
 d=%7Bthis.
-props.
 numberCl
@@ -4107,16 +4107,27 @@
 rClicked
+.bind(this)
 %7D%0A      

Make Pagination Great Again - per-component currentPage listener in state as opposed to a global one in redux :(