import React, { Component } from 'react';

import { Table } from 'lib/components';

import PaymentItemForm from 'components/PaymentItemForm';

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


class PaymentItems extends Table {


	renderItem(item, key, disabled) {
		let secondary = [];

		if (item.payment) {
			if (item.payment.name) {
				secondary.push(item.payment.name);
			}
		}

		return (
			<div key={ key } className="flex-list-row">
				<div className="content">
					<div className="list-row-data">
			            <div className="record-type">
			                <div className="icon">
			                    { icons.payment }
			                    <div className={`status-indicator ${item.billableStatus || "planned"}`}/>
			                </div>
			                <div className="date">{ formatDate(item.dueDate, this.props.i18n) }</div>
			            </div>
						<div className="main">
							<div className="main-value">
								{ item.name }
							</div>
							<div className="additional-info">
								{ secondary.join(" | ") }
							</div>
						</div>
						<div className="right p5">
							<div className="main-value">
								{ formatMoney(item.amount, 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 PaymentItems;
