import React from 'react';
import ReactDOM from 'react-dom';
import { CreditCard } from 'web-foundation';

const creditCard = new CreditCard.Model();

class CreditCardExample extends React.Component {
    onClick() {
        console.log('errors:', this._card.model.errors); // eslint-disable-line
        console.log(creditCard.out()); // eslint-disable-line
    }

    validate() {
        this._card.formValidate();
    }

    render() {
        return (
            <div>
                <CreditCard.View
                    inlineErrors
                    ref={ (n) => (this._card = n) }
                    model={ creditCard } />
                <button onClick={ this.onClick.bind(this) }>out</button>
                <button onClick={ this.validate.bind(this) }>validate</button>
            </div>
        );
    }
}

export default function() {
    ReactDOM.render(
        <CreditCardExample />,
        document.getElementById('credit-card')
    );
}
