<template>
	<div class="relative">
		<loading-component  v-show="isLoading"></loading-component>
        <div class="row" v-show="!isCreating">
            <div class="col">
                <div class="row" v-show="!addresses.length && !isLoading">
                    <div class="col-auto">
                        <warning-message-component title="There is no delivery addresses found!" message="Click on the button bellow to add a new delivery address."></warning-message-component>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <address-book-component v-for="address in addresses" v-bind:key="address.id" :data="address" :default="address.default"></address-book-component>
                    </div>
                </div>
                <div class="row align-items-center justify-content-center">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <button class="btn btn-sm btn-success b-rad-none all-caps" @click="toggleCreate()"><i class="fa fa-plus m-r-5"></i> Add New Address</button>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <pagination-component ref="pagination" v-on:changePage="fetchAddresses($event)"></pagination-component>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-show="isCreating">
            <div class="col">
                <address-book-form-component v-on:collapseEdit="toggleCreate()" :id="this.companyId"></address-book-form-component>
            </div>
        </div>
	</div>
</template>

<script>
    export default {
        props: {
            data: {
                type: String,
				required: true
			}
		},
        data() {
            return {
                companyId: null,
                addresses: [],
                isCreating: false,
                isLoading: true
            }
        },
        created() {
            this.companyId = this.data;
            this.fetchAddresses();
        },

        mounted() {
            Event.$on('updateAddressBookList', () => {
                this.fetchAddresses();
            });
        },

        methods: {
            fetchAddresses(page = 1){
                let vm = this;
                //turn on loading animation
                this.isLoading = true;

                fetch(route('api.company.addressBook.list', {companyId: this.companyId}) + '?page='+ page).then(response => response.json())
                    .then(response => {

                        vm.addresses = response.data;

                        this.$refs.pagination.makePagination(response.meta, response.links);

                        //turn off loading animation
                        this.isLoading = false;

                    })
                    .catch(error => console.log(error))
            },
            toggleCreate(){
                this.isCreating = !this.isCreating;
            }
        }
    }
</script>