import React, { Component } from 'react';
import moment from 'moment-timezone';
import TransactionRowComponent from './TransactionRowComponent';
import UploadAssetsComponent from '../Common/UploadAssetsComponent';
import {
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn
  } from 'material-ui';

export default class TransactionComponent extends Component {
    renderRows = () => {
        return this.props.items.map(item => {
            return <TableRow key={item.id}>
                        <TableRowColumn>{item.amount}</TableRowColumn>
                        <TableRowColumn>{item.description}</TableRowColumn>
                        <TableRowColumn>{moment(item.date).tz('America/Santiago').format('DD/MM/YYYY')}</TableRowColumn>
                        <TableRowColumn>{item.movement_code}</TableRowColumn>
                        <TableRowColumn>
                            <TransactionRowComponent
                                businessCenters={this.props.businessCenters}
                                transactionId={item.id}
                                businessCenterId={item.business_center.id}
                                onChangeBusinessCenter={this.props.onChangeBusinessCenter}
                            />
                        </TableRowColumn>
                        <TableRowColumn>
                            <UploadAssetsComponent
                                assets={item.assets}
                                onUploadAssets={this.props.onUploadAssets}
                                transactionId={item.id}
                                onDeleteAsset={this.props.onDeleteAsset}
                            />
                        </TableRowColumn>
                </TableRow>
        });
    }

    render () {
        return (
            <Table celled>
                <TableHeader>
                    <TableRow>
                        <TableHeaderColumn>Monto</TableHeaderColumn>
                        <TableHeaderColumn>Descripción</TableHeaderColumn>
                        <TableHeaderColumn>Fecha</TableHeaderColumn>
                        <TableHeaderColumn>Nº movimiento banc.</TableHeaderColumn>
                        <TableHeaderColumn>Categoría</TableHeaderColumn>
                        <TableHeaderColumn>Documentos</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    { this.renderRows() }
                </TableBody>
            </Table>
        );
    }
}