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';

import icons from 'constants/icons';


const PAYMENT_METHODS = [ "CASH", "BANK_TRANSFER", "ONLINE_PAYMENT", "PAYPAL" ];


class PaymentMethodForm extends AbstractForm {

    constructor(props) {
        super(props);

        this.renderBankTransfer = this.renderBankTransfer.bind(this);
        this.renderCash = this.renderCash.bind(this);
        this.renderOnlinePayment = this.renderOnlinePayment.bind(this);
        this.renderPaypal = this.renderPaypal.bind(this);
    }

    renderBankTransfer() {
        let { valueOf, intl, i18n } = this.props;
        let fields = [];
        fields.push(this.renderField("bankName", intl.formatMessage(messages.bankName)));
        fields.push(this.renderField("bankAccount", intl.formatMessage(messages.bankAccount)));
        fields.push(this.renderField("bankIban", intl.formatMessage(messages.bankIban)));
        return fields;
    }

    renderCash() {
        let { valueOf, intl, i18n } = this.props;
        return [];
    }

    renderOnlinePayment() {
        let { valueOf, intl, i18n } = this.props;
        return this.renderField("url", intl.formatMessage(messages.url));
    }

    renderPaypal() {
        let { valueOf, intl, i18n } = this.props;
        return this.renderField("email", intl.formatMessage(messages.paypalId));
    }


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

        let options = PAYMENT_METHODS.map(value => ({ value, label: intl.formatMessage(messages[`paymentMethod_${value}`]) }));
        let fields = null;

        switch (valueOf("type")) {
        case "BANK_TRANSFER":
            fields = this.renderBankTransfer();
            break;
        case "ONLINE_PAYMENT":
            fields = this.renderOnlinePayment();
            break;
        case "PAYPAL":
            fields = this.renderPaypal();
            break;
        }

        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("type", intl.formatMessage(messages.type), options) }
                                            </div>
                                        </div>
                                        
                                        { !!editName && this.renderField("name", intl.formatMessage(messages.name), { className: "big" }) }
                                        { !!editName && this.renderCheckbox("defaultMethod", intl.formatMessage(messages.defaultPayment)) }

                                        <div className="pv20">
                                            { fields }
                                        </div>

                                        { this.renderTextArea("instructions", intl.formatMessage(messages.instructions)) }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }


}


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

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

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

        return valid;
    }
});



class PaymentMethods extends EditableList {


    renderFooter(disabled) {
        let { templates, intl } = this.props;
        let buttons = [];

        if (Array.isArray(templates) && templates.length) {
            for (let i = 0; i < templates.length; i++) {
                let template = templates[i];
                buttons.push(<button type="button" key={ template.id } onClick={ () => this.saveItem({ ...template, id: null }, { mode: "create" }) } disabled={ disabled }>{ intl.formatMessage(messages.addButton, { name: template.name }) }</button>);
            }
        }

        return (
            <div className="button-bar pv10 left">
                { buttons }
                <button type="button" onClick={ () => this.showCreateForm(-1, { type: 'CASH' }) } disabled={ disabled }>{ this.props.intl.formatMessage(messages.addAction)}</button>
            </div>
        );
    }


    renderItem(item, key, disabled) {
        let intl = this.props.intl;

        let title = null;
        let description = null;

        if (item.name) {
            title = item.name;
        } else {
            title = intl.formatMessage(messages[`paymentMethod_${item.type}`]);
        }

        let msg = messages[`paymentMethod_${item.type}_description`];
        if (msg) {
            description = intl.formatMessage(msg, { item });
        } else {
            description = "";
        }

        //TODO render properly regarding payment method

        return (
            <div key={ key } className="flex-list-row">
                <div className="content">
                    <div className="list-row-data">
                        <div className="record-type">
                            <div className="icon">
                                { icons.qrPayment }
                            </div>
                            <div className="date"></div>
                        </div>
                        <div className="main">
                            <div className="main-value">
                                { title }
                            </div>
                            <div className="secondary-value">
                                { description }
                            </div>
                            <div className="secondary-value">
                                { item.instructions }
                            </div>
                        </div>
                    </div>
                </div>
                <div className="actions">
                    <button className="icon" onClick={ () => this.deleteItem(key) }>{ icons.delete }</button>
                    <button className="icon" onClick={ () => this.showEditForm(key) }>{ icons.leftMenu }</button>
                </div>
            </div>
        );
    }


    renderItemForm(item, key, disabled) {
        return (
            <PaymentMethodForm
                className={ this.props.formClassName || "pv10" }
                key={ key }
                data={ item }
                onCancel={ this.hideForm }
                onSubmit={ this.saveItem }
                intl={ this.props.intl }
                i18n={ this.props.i18n }
                editName={ this.props.editName }
                />
        );
    }


}


export default injectIntl(PaymentMethods);
