<template>

    <section>

        <div class="userFormBilling">

            <h5 class="formTitle" v-text="title"></h5>


            <div class="highlightBox" v-if="toggleMessageCheckbox">

                <div class="row">

                    <div class="inputWrap">

                        <input
                                type="checkbox"
                                id="address_message_toggle"
                                v-model="toggleMessageData.shipping_same_as_billing"
                                @change="toggleAddressVisibility()"
                        >
                        <label for="address_message_toggle" v-text="toggleMessageCheckbox">
                            <i class="hoverFX"></i>
                        </label>

                    </div> <!-- .inputWrap -->

                </div><!-- .row -->

                <div class="highlightExtra">
                    <p v-text="toggleMessageDetails"></p>
                </div> <!-- .highlightExtra -->
            </div>


            <section :class="[toggleMessageCheckbox ? 'deliveryAddressBox' : '']">

                <div class="row fieldIcon iconAddress" :class="errors.address1 ? 'errorWrap': ''">

                    <div class="inputWrap">

                        <input
                                type="text"
                                placeholder="Address line 1"
                                v-model="data.address1"
                                @input="clearErrors()"
                        >
                        <div class="validationMessage" v-if="errors.address1" v-html="errors.address1"></div>

                    </div><!-- .inputWrap -->

                </div><!-- .row -->

                <div class="row fieldIcon iconAddress" :class="errors.address2 ? 'errorWrap': ''">

                    <div class="inputWrap">

                        <input
                                type="text"
                                placeholder="Address line 2"
                                v-model="data.address2"
                                @input="clearErrors()"
                        >
                        <div class="validationMessage" v-if="errors.address2" v-html="errors.address2"></div>

                    </div><!-- .inputWrap -->

                </div><!-- .row -->

                <div class="formGrid">

                    <div class="fieldLeft">

                        <div class="row fieldIcon iconAddress" :class="errors.city ? 'errorWrap': ''">

                            <div class="inputWrap">

                                <input
                                        type="text"
                                        placeholder="City"
                                        v-model="data.city"
                                        @input="clearErrors()"
                                >
                                <div class="validationMessage" v-if="errors.city" v-html="errors.city"></div>

                            </div><!-- .inputWrap -->

                        </div><!-- .row -->

                    </div> <!-- .fieldLeft -->

                    <div class="fieldRight">

                        <div class="row fieldIcon iconPostcode" :class="errors.postcode ? 'errorWrap': ''">

                            <div class="inputWrap">

                                <input
                                        type="text"
                                        placeholder="Postcode"
                                        v-model="data.postcode"
                                        @input="clearErrors()"
                                >
                                <div class="validationMessage" v-if="errors.postcode" v-html="errors.postcode"></div>

                            </div><!-- .inputWrap -->

                        </div><!-- .row -->

                    </div> <!-- .fieldRight -->

                </div> <!-- .formGrid -->

            </section>


        </div> <!-- .userFormBilling -->

    </section>

</template>


<script>

export default {

    props: [
        "title",
        "data",
        "errors",
        "toggleMessageCheckbox",
        "toggleMessageDetails",
        "toggleMessageData",
    ],


    computed: {

        isFormVisible: function() {

            return this.checkFormVisibility();

        }

    },

    mounted: function() {
        if(typeof this.toggleMessageData != 'undefined') {
            this.toggleAddressVisibility();
        }

    },

    methods: {

        checkFormVisibility: function() {

            let is_visible = true;

            if(typeof this.toggleMessageData != 'undefined') {
                if (this.toggleMessageData && !this.toggleMessageData.shipping_same_as_billing) {
                    is_visible = false;
                }
            }

            return is_visible;

        },

        toggleAddressVisibility: function() {

            if(typeof this.toggleMessageData == 'undefined') {
                return true;
            }

            var vm = this,
                $address = $('.deliveryAddressBox');

            vm.clearErrors();

            if ($address.length) {
                if (!vm.checkFormVisibility()) {
                    $address.stop().slideDown(500);
                } else {
                    $address.stop().slideUp(500);
                }
            }

        },

        clearErrors: function() {
            this.$emit('clear-page-has-errors');
        }

    },

}

</script>

