import React, { Component } from 'react';

import { Table } from 'lib/components';

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


/*
<div key={ key } className="flex-list-row">
	<div className="content">
	</div>
	<div className="actions">
		<button className="icon" onClick={ () => handleBillableClick(row.type, row.objectId, router) }>{icons.leftMenu}</button>
	</div>
</div>


        .planned,
        .inactive {
            background-color: #BABABA;
        }

        .active {
            background-color: #08acff;
        }

        .overdue {
            background-color: #ff0707;
        }

        .finished {
            background-color: #00c900;
        }
<div class="status-indicator active"></div>
*/


class IncomeList extends Table {
	
	renderItem(item, index) {
		let i18n = this.props.i18n;

		return (
			<div key={ index } className="flex-list-row">
				<div className="content">
					<div className="list-row-data">
			            <div className="record-type">
			                <div className="icon">
			                    { item.incomeType == 'income' ? icons.income : icons.invoice }
			                    <div className={`status-indicator ${item.billableStatus || "planned"}`}/>
			                </div>
			                <div className="date">{ formatDate(item.dueDate, i18n) }</div>
			            </div>
						<div className="main">
							<div className="main-value">
								{ item.name }
							</div>
							<div className="additional-info">
								{ item.incomeType == 'income' ? item.description : item.idNumber }
							</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 IncomeList;