import React, { Component } from 'react';

import { Table } from 'lib/components';

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

class ExpenseList extends Table {
	
	renderItem(item, index) {
		return (
			<div key={ index } className="flex-list-row">
				<div className="content">
					<div className="list-row-data">
			            <div className="record-type">
			                <div className="icon">
			                    { icons.expenses }
			                    <div className={`status-indicator ${item.billableStatus || "planned"}`}/>
			                </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">
								{ formatMoney(item.totalAmount, item.currencySymbol, i18n) }
							</div>
							<div className="additional-info">
								{ formatMoney(item.totalPayable, item.currencySymbol, i18n) }
							</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 ExpenseList;