import React, { Component } from 'react';

import { Table } from 'lib/components';

import { formatMoney, formatDate } from 'lib/i18n';
import icons from 'constants/icons';


class PaymentList extends Table {
	
	renderItem(item, index) {
		let { i18n, stats } = this.props;
		let total = 0;
		if (stats && stats[item.id]) {
			total = stats[item.id].total;
		}

		return (
			<div key={ index } className="flex-list-row">
				<div className="content">
					<div className="list-row-data">
			            <div className="record-type">
			                <div className="icon">
			                    { icons.paymentCategory }
			                </div>
			                <div className="date">{ formatDate(item.expenseDate, i18n) }</div>
			            </div>
						<div className="main">
							<div className="main-value">
								{ item.name }
							</div>
							<div className="additional-info">
								{ item.subjectName }
							</div>
						</div>
						<div className="right p5">
							<div className="main-value">
								{ stats ? formatMoney(total, item.currencySymbol, i18n) : null }
							</div>
						</div>
					</div>
				</div>
				{ this.props.onDetailClick ? (
					<div className="actions">
						<button className="icon" onClick={ ()=> this.props.onDetailClick(item.id, item) }>{icons.leftMenu}</button>
					</div>
				) : null }
			</div>
		);
	}

}


export default PaymentList;