import React, { Component } from 'react';

import { EditableList, Alert } from 'lib/components';

import TaxItemForm from 'components/TaxItemForm';
import Toast from 'components/Toast';

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

import messages from './messages';


require("./TaxItems.scss");

function handleAddItem(titem, intl) {
	console.warn(arguments);
	console.warn(titem);

	//let that = this;
	if (titem.base == 0 || !titem.base || titem.tax == 0 || !titem.tax) {
		Alert.alert(
            intl.formatMessage(messages.emptyTaxTitle), 
            intl.formatMessage(messages.emptyTaxMessage), 
            [
                { text: intl.formatMessage(messages.emptyTaxNo) }, 
                { text: intl.formatMessage(messages.emptyTaxModify), primary: true, onPress: () => {
						this.showCreateForm(-1, { ...titem });
                	}
            	},
                { text: intl.formatMessage(messages.emptyTaxYes), primary: true, onPress: () => {
						this.saveItem(titem, { mode: "create" });
                	}
            	}
            ]
		);

	} else {
		this.saveItem(titem, { mode: "create" });
	}
}

class TaxItems extends EditableList {


	renderFooter(disabled) {
		let templates = this.props.taxTemplates;
		let base = this.props.baseAmount;

		let data = {};
		let buttons = [];
		let { items } = this.state;
		let assignedTaxTypes = {};
		let intl = this.props.intl;

		if (Array.isArray(templates) && templates.length) {
			for (let i = 0; i < templates.length; i++) {
				let { id, ...t } = templates[i];
				let titem = calculateTaxItem({...t, ...data, taxType: t.name, base});

				buttons.push(<button type="button" key={ id } onClick={ handleAddItem.bind(this, titem, intl) } disabled={ disabled }>{ intl.formatMessage(messages.addButton, { taxName: t.name }) }</button>);
			}
		}

		return (
			<div className="button-bar pv10 center">
				{ buttons }
				<button type="button" onClick={ () => this.showCreateForm(-1, {...data}) } disabled={ disabled }>{ intl.formatMessage(messages.addTaxButton) }</button>
				
			</div>
		);
	}


	renderItem(item, key, disabled) {
		let i18n = this.props.i18n;
		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.taxType }</div>
						{/*<div className="secondary">Sazba: { formatPercent(item.taxPercent, i18n) }</div>*/}
					</div>
					<div className="col-xs-6 right p10">
						<div className="main">
							{ formatMoney(item.tax, this.props.currencySymbol, i18n) }
						</div>
						<div className="secondary">
							{ formatMoney(item.base, this.props.currencySymbol, i18n) }
						</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 (
			<TaxItemForm 
				key={ key }
				data={ item }
				onCancel={ () => this.hideForm() }
				onSubmit={ (data) => this.saveItem(data) }
				notificationsKey={ this.props.notificationsKey }
				i18n={ this.props.i18n }
				/>
		);
	}


}


export default injectIntl((props) => {
	return <TaxItems {...props} intl={ props.intl} />
w});
