import React, { Component } from 'react';

import { AbstractForm, ButtonBar, Button } from 'lib/components';

import TaxItems from 'components/TaxItems';
import Toast from 'components/Toast';

import form from 'lib/form';
import validator from 'lib/validator';

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


class InvoiceItemForm extends AbstractForm {

	constructor(props) {
		super(props);

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


	calculate() {
		let 
			{ valueOf, onChangeHandler } = this.props,
			priceUom = valueOf('priceUom', 0),
			pieces = valueOf('pieces', 0);

		//TODO improve this
		let amount = priceUom * pieces;
		onChangeHandler('amount', amount => amount)(amount);
	}


	render() {
		let { valueOf, i18n, intl } = this.props;

 		return (
			<div className={ this.props.className }>

            	<div className="row row-margin-10">
            		<div className="col-xs-12 p10">
						<div className="form">
							<div className="row row-margin-10">
								<div className="col-md-12 p10">
									<div className="row row-margin-10">
										{/* TODO redesign UX */}
										<div className="col-md-5 col-sm-12">
											{ this.renderTextArea("name", intl.formatMessage(messages.description)) }
										</div>
										<div className="col-md-2 col-sm-3 col-xs-6">
											{ this.renderNumericField("pieces", intl.formatMessage(messages.pieces), { i18n: i18n }) }
										</div>
										<div className="col-md-1 col-sm-3 col-xs-6">
											{ this.renderField("uom", intl.formatMessage(messages.uom)) }
										</div>
										<div className="col-md-2 col-sm-3 col-xs-6">
											{ this.renderDecimalField("priceUom", intl.formatMessage(messages.priceUom), { i18n: i18n }) }
										</div>
										<div className="col-md-2 col-sm-3 col-xs-6">
											{ this.renderDecimalField("amount", intl.formatMessage(messages.amount), { i18n: i18n }) }

											<button type="button" onClick={ this.calculate }>{ intl.formatMessage(messages.calculateItem) }</button>
											{/* this.renderTextArea("note", intl.formatMessage({ id: "invoice.entity.item.note" })) */}
										</div>
									</div>
								</div>
							</div>

							<div className="row row-margin-10">
								<div className="col-xs-8">
									<TaxItems 
										className="table"
										items={ this.props.valueOf('taxItems') }
										currencySymbol={ this.props.currencySymbol }
										onChange={ this.props.onChangeHandler('taxItems', items => items) }
										i18n={ i18n }

										baseAmount={ this.props.valueOf("amount") }
										taxTemplates={ this.props.taxTemplates }
										/>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div className="row row-margin-10">
					<div className="col-xs-12 p10">
						<ButtonBar>
							<form onSubmit={ this.handleSubmit(this.props.onSubmit) }>
								<Button 
									title={ intl.formatMessage(commonMessages.buttonCancel) }
									onPress={ typeof this.props.onCancel == "function" ? () => this.props.onCancel() : null }
									/>
								<Button 
									title={ intl.formatMessage(commonMessages.buttonSave) }
									type="submit"
									primary
									/>
							</form>
						</ButtonBar>
					</div>
				</div>
			</div>
		);
	}
}


export default form(injectIntl(InvoiceItemForm), {
	onValidationFailed: Toast.validationFailed,
	validate: (item, error) => {
		let errors = [];
		let valid = true;

		if (!validator.required(item.name)) {
			error({ field: 'name', code: 'common.validation.requiredField' });
			valid = false;
		}


		if (item.pieces) {
			if (!validator.required(item.uom)) {
				error({ field: 'uom', code: 'common.validation.requiredField' });
				valid = false;
			}

			if (!validator.required(item.priceUom)) {
				error({ field: 'priceUom', code: 'common.validation.requiredField' });
				valid = false;

			} else if (!validator.decimal(item.priceUom)) {
				error({ field: 'priceUom', code: 'common.validation.decimalField' });
				valid = false;
			}
			if (!validator.decimal(item.priceUom)) {
				error({ field: 'pieces', code: 'common.validation.decimalField' });
				valid = false;
			}
		}


		if (!validator.required(item.amount)) {
			error({ field: 'amount', code: 'common.validation.requiredField' });
			valid = false;
		} else if (!validator.decimal(item.amount)) {
			error({ field: 'amount', code: 'common.validation.decimalField' });
			valid = false;
		}

		return valid;
	}
});
