import React, { Component } from 'react';

import { EditableList } from 'lib/components';
import { AbstractForm, ButtonBar, Button, ListTitle } from 'lib/components';
import Toast from 'components/Toast';
import form from 'lib/form';
import validator from 'lib/validator';

import { formatMoney, formatNumber, formatPercent } from 'lib/i18n';
import { injectIntl } from 'react-intl';


class PaymentAccountForm extends AbstractForm {

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

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

				<ListTitle 
					title={ title } 
					buttons={
						<ButtonBar>
							<form onSubmit={ this.handleSubmit(this.props.onSubmit) }>
								<Button 
									title={ intl.formatMessage({ id: "common.button.cancel" }) }
									onPress={ typeof this.props.onCancel == "function" ? () => this.props.onCancel() : null }
									/>
								<Button 
									title={ intl.formatMessage({ id: "common.button.save" }) }
									type="submit"
									primary
									/>
							</form>
						</ButtonBar>
					}
					/>

            	<div>
					<div className="form">
						<div className="row">
							<div className="col-md-12 pv10">
								<div className="row">
									<div className="col-xs-12">
										{ this.renderField("name", intl.formatMessage({ id: "paymentAccount.entity.name" })) }
									</div>
									<div className="col-xs-12">
										{ this.renderField("bankName", intl.formatMessage({ id: "paymentAccount.entity.bankName" })) }
									</div>
									<div className="col-xs-12">
										{ this.renderField("currency", intl.formatMessage({ id: "common.entity.currency" })) }
									</div>
									<div className="col-xs-12">
										{ this.renderField("accountNumber", intl.formatMessage({ id: "paymentAccount.entity.accountNumber" })) }
									</div>
									<div className="col-xs-12">
										{ this.renderField("iban", intl.formatMessage({ id: "paymentAccount.entity.iban" })) }
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}


}


PaymentAccountForm = form(PaymentAccountForm, {
	onValidationFailed: Toast.validationFailed,
	validate: (account, error) => {
		let valid = true;

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

		return valid;
	}
});



class PaymentAccounts extends EditableList {


	renderHeader(disabled) {
		let { intl, title, description } = this.props;
		return (
			<div className="">
				{/* TODO title with buttons */}
				<ListTitle 
					title={ title }
					buttons={
						<button type="button" onClick={ () => this.showCreateForm(-1) } disabled={ disabled }>Add</button>		
					}
					/>
				{ description }	
			</div>
		);
	}


	renderItem(item, key, disabled) {
		return (
			<div className="list-row bottom-border" key={ key }>
				<div className="row-content row">
					<div className="left p10">
						<div className="main">{ item.name }</div>
						<div className="secondary">{ item.bankName } | { item.accountNumber } | { item.currency }</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 (
			<PaymentAccountForm
				key={ key }
				data={ item }
				onCancel={ () => this.hideForm() }
				onSubmit={ (data) => this.saveItem(data) }
				notificationsKey={ this.props.notificationsKey }
				intl={ this.props.intl }
				className={ this.props.formClassName || "pv10" }
				/>
		);
	}


}


export default injectIntl(PaymentAccounts);
