import React from 'react';
import ReactDOM from 'react-dom';
import { Address, TextInput } from 'web-foundation';
import { FormValidation } from 'transforms';
import { createSyncChecker } from 'transforms/form-validation';
import { Model, ModelListener } from 'front';

class AddresswithValidationModel extends Model {
    constructor(data) {
        super({
            field: '',
            anotherField: '',
            address: Address.Model
        });

        this.fill(data);
    }
}

class AddressWithValidation extends ModelListener {
    static defaultProps = {
        model: AddresswithValidationModel
    };

    constructor(props) {
        super(props);
        FormValidation(
            this,
            createSyncChecker(this, (key, value) => {
                if (key === 'field' && !value) {
                    return 'needs to be non-blank';
                }

                if (key === 'anotherField' && !value) {
                    return 'also cannot be blank';
                }

                return null;
            }));
    }

    componentDidMount() {
        // this is how you would configure required fields/error messages
        this._address.setErrorMessages({
            apt: 'making this required.'
        });

        this.formValidate.settings.addChildren(this._address);
    }

    click() {
        this.formValidate((valid) => {
            console.log('valid: ', valid); // eslint-disable-line
        });
    }

    generateErrors() {
        // here you can just pass errors directly to address instance
        this.model.address.errors = {
            street: 'newly generated error',
            apt: 'wow apt not valid and this msg is long',
            zip: 'zippopopoooo'
        };
        this.forceUpdate();
    }

    clear() {
        this.model.address.clear();
    }

    out() {
        console.log(this.model.out()); // eslint-disable-line
    }

    render() {
        return (
            <div>
                <div className="row t50-50">
                    <TextInput
                        placeholder="field for testing"
                        update={ this.update.bind(this, 'field') }
                        error={ this.model.errors.field }
                        value={ this.model.field } />
                    <TextInput
                        placeholder="field for testing"
                        update={ this.update.bind(this, 'anotherField') }
                        error={ this.model.errors.anotherField }
                        value={ this.model.anotherField } />
                </div>
                <Address.View
                    model={ this.model.address }
                    ref={ (n) => (this._address = n) }
                    native
                    abbreviated />
                <button
                    onClick={ this.click.bind(this) }>
                    validate
                </button>
                <button
                    onClick={ this.generateErrors.bind(this) }>
                    generate errors
                </button>
                <button
                    onClick={ this.clear.bind(this) }>
                    clear
                </button>
                <button
                    onClick={ this.out.bind(this) }>
                    out
                </button>
            </div>
        );
    }
}

export default function() {
    ReactDOM.render(
        <AddressWithValidation abbreviated />,
        document.getElementById('address')
    );
}
