import React, { Component } from 'react';

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

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

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



class TaxItemForm extends AbstractForm {

	constructor(props) {
		super(props);

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


	calculate() {
		let 
			{ valueOf, onChangeHandler } = this.props,
			flat = this.props.valueOf("flat", false),
			taxAmount = valueOf('taxAmount', 0),
			taxPercent = valueOf('taxPercent', 0),
			base = valueOf('base', 0);

		let tax = flat ? taxAmount : taxPercent / 100 * base;
		onChangeHandler('tax', tax => tax)(tax);
	}


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

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

				<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 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">
										<div className="col-xs-12">
											{ this.renderField("taxType", intl.formatMessage(messages.name)) }
										</div>
										<div className="col-xs-12">
											<div className="form-field">
												{ this.renderToggleButtons("flat", "Tax type", [ 
														{ value: false, label: "PERCENTAGE" } ,
														{ value: true, label: "FLAT" }
													])
												}
											</div>
										</div>
										{ flat ? (
											<div>
												<div className="col-xs-12">
													{ this.renderDecimalField("base", intl.formatMessage(messages.base), { i18n }) }
												</div>
												<div className="col-xs-12">
													{ this.renderDecimalField("taxAmount", intl.formatMessage(messages.tax), { i18n }) }
												</div>
											</div>
										) : (
											<div>
												<div className="col-xs-12">
													{ this.renderDecimalField("taxPercent", intl.formatMessage(messages.percent), { i18n }) }
												</div>
												<div className="col-xs-12">
													{ this.renderDecimalField("base", intl.formatMessage(messages.base), { i18n }) }
												</div>
												<div className="col-xs-12">
													{ this.renderDecimalField("tax", intl.formatMessage(messages.tax), { i18n }) }
													<button type="button" onClick={ this.calculate }>{ intl.formatMessage(messages.calculate) }</button>
												</div>
											</div>
										) }
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}


}


export default form(injectIntl(TaxItemForm), {
	onValidationFailed: Toast.validationFailed,
	validate: (taxItem, error) => {
		let flat = taxItem.flat;
		let valid = true;

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

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

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

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

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

		return valid;
	}
});
