import React, { Component } from 'react';

import { EditableList, Info, ToolbarButton, ButtonBar, Button, Title } from 'lib/components';

import InvoiceItemForm from 'components/InvoiceItemForm';
import Toast from 'components/Toast';

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

import { injectIntl } from 'react-intl';
import messages from './messages';
import commonMessages from '../../messages.js';

import icons from 'constants/icons';

import './style.scss';


class InvoiceItems extends EditableList {


	constructor(props) {
		super(props);

		this.renderTaxItem = this.renderTaxItem.bind(this);
	}

	
	renderFooter(disabled) {
		return (
			<div className="invoice-item-header mv10">
				<ButtonBar mode="center">
					<Button type="button" onPress={ () => this.showCreateForm(-1) } disabled={ disabled } title={ this.props.intl.formatMessage(messages.addItem) }/>
				</ButtonBar>
			</div>
		);
	}


	renderTaxItem(item, key) {
		return (
			<div key={key}>
					<div className="right p10">
						<div className="secondary">
							{ item.taxType } | { formatMoney(item.tax, this.props.currencySymbol, i18n) }
						</div>
					</div>
			</div>
		);
	}


	renderItem(item, key, disabled) {
		return (
			<div className="list-row bottom-border" key={ key }>

				<div className="row-content row">
					<div className="col-xs-6 left p10">
						<div className="main">{ item.code } { item.name }</div>
						{ item.uom ? <div className="secondary">{ formatNumber(item.pieces, this.props.i18n) } { item.uom }</div> : null }
					</div>
					<div className="col-xs-6 right p10">
						<div className="main">
							{ formatMoney(item.amount, this.props.currencySymbol, this.props.i18n) }
						</div>
						{ item.uom ? (
							<div className="secondary">
								{ formatMoney(item.priceUom, this.props.currencySymbol, this.props.i18n) } / { item.uom }
							</div>
						) : null }
					</div>
					<div className="col-xs-12 secondary">
						{ item.note }
					</div>

					<div className="col-xs-12 small">
						{ Array.isArray(item.taxItems) ? item.taxItems.map(this.renderTaxItem) : null }
					</div>

				</div>

				<div className="row-menu">
					<span className="icon" onClick={ () => this.showEditForm(key) }></span>
					<span className="icon" onClick={ () => this.deleteItem(key) }></span>
				</div>
			</div>
		);
	}


	renderItemForm(item, key, disabled) {
		return (
			<InvoiceItemForm 
				className="p10 editable-list-inline-form"
				key={ key }
				data={ item }
				currencySymbol={ this.props.currencySymbol }
				i18n={ this.props.i18n }
				onCancel={ () => this.hideForm() }
				onSubmit={ (data) => this.saveItem(data) }

				taxTemplates={ this.props.taxTemplates }
				/>
		);
	}


}


export default injectIntl(InvoiceItems);
