import React, { Component } from 'react';

import { EditableList } from 'lib/components';
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 { formatMoney, formatNumber, formatPercent } from 'lib/i18n';

import messages from "./messages";
import commonMessages from '../../messages.js';
//require("./TaxItems.scss");

class TaxTemplateForm extends AbstractForm {


	render() {
		let { valueOf, intl, i18n } = 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>
							<Button 
								title={ intl.formatMessage(commonMessages.buttonCancel) }
								onPress={ typeof this.props.onCancel == "function" ? () => this.props.onCancel() : null }
								/>
							<Button 
								title={ intl.formatMessage(commonMessages.buttonSave) }
								type="button"
								onPress={ this.handleSubmit() }
								/>
						</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">
											<div className="form-field">
												{ this.renderToggleButtons("flat", intl.formatMessage(messages.taxType), [ 
														{ value: false, label: intl.formatMessage(messages.taxType_PERCENTAGE) } ,
														{ value: true, label: intl.formatMessage(messages.taxType_FLAT) }
													])
												}
											</div>
										</div>
										{ this.renderField("name", intl.formatMessage(messages.name), { className: "big" }) }
										{ flat ? this.renderDecimalField("taxAmount", intl.formatMessage(messages.amount)) :  this.renderDecimalField("taxPercent", intl.formatMessage(messages.percentage)) }
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}


}


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

		if (!validator.required(taxItem.name)) {
			error({ field: 'name', 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;
			}
		}
		return valid;
	}
});



class TaxTemplates extends EditableList {


	renderFooter(disabled) {
		return (
			<div className="p10">
				<button type="button" onClick={ () => this.showCreateForm(-1, { flat: false }) } disabled={ disabled }>{ this.props.intl.formatMessage(messages.addAction)}</button>
			</div>
		);
	}


	renderItem(item, key, disabled) {
		let intl = this.props.intl;
		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.name }</div>
						{ item.flat ? (
							<div className="secondary">{ intl.formatMessage(messages.amount) }: { formatPercent(item.taxAmount) }</div>
						) : (
							<div className="secondary">{ intl.formatMessage(messages.percentage) }: { formatPercent(item.taxPercent) }</div>
						) }
					</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 (
			<TaxTemplateForm
				className={ this.props.formClassName || "pv10" }
				key={ key }
				data={ item }
				onCancel={ this.hideForm }
				onSubmit={ this.saveItem }
				intl={ this.props.intl }
				i18n={ this.props.i18n }
				/>
		);
	}


}


export default injectIntl(TaxTemplates);
