<template>
    <form>
        <!-- <div class="form-group">
            <label for="cc-number" class="control-label">Card Number</label>
            <div id="cc-number" class="form-control input-lg" data-braintree-class="braintree-input"></div>
        </div> -->

        <form-input name="cc-number" label="Card Number" :hasError="hasError" :hasSuccess="hasSuccess"></form-input>
    </form>
</template>

<script>
export default {
    props: {
        clientInstance: {
            required: true,
            type: Object
        }
    },
    components: {
        formInput: require('@/components/paymentmethod/form-input.vue').default
    },
    data: function () {
        return {
            hasError: true,
            hasSuccess: false,
            working: '',
            loadingStatus: ''
        }
    },
    methods: {
        createCard: function () {
            let clientInstance = this.clientInstance;

            this.working = true;
            this.loadingStatus = 'Generating secure card fields...'

            window.braintree.hostedFields.create({
                client: clientInstance,
                styles: {
                    'input': {
                        'font-size': '14px',
                        'border':'none'
                    },
                    'input.invalid': {
                        'color': 'red'
                    },
                    'input.valid': {
                        'color': 'green'
                }
                },
                fields: {
                    number: {
                        selector: '#cc-number',
                        placeholder: '4111 1111 1111 1111'
                    },
                            // cvv: {
                            // selector: '#cvv',
                            // placeholder: '123'
                            // },
                            // expirationDate: {
                            // selector: '#expiration-date',
                            // placeholder: '10/2019'
                            // }
                }
                }, (hostedFieldsError, hostedFieldsInstance) => {
                    if ( hostedFieldsError ) {
                        console.error(hostedFieldsError);
                        return;
                    }

                    // this.working = false;
                })
        }
    },
    watch: {
        working: function (newWork) {
            this.$emit('working', newWork);
        },
        loadingStatus: function (status) {
            this.$emit('loadingStatus', status);
        }
    },
    created: function () {
        this.createCard()
    }
}
</script>