<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="!contacts.length && !isLoading">
                    <div class="col-auto">
                        <warning-message-component title="There is no contacts found!" message="Click on the button bellow to add a new contact information."></warning-message-component>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <contact-component v-for="contact in contacts" v-bind:key="contact.id" :data="contact" :type="type"></contact-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 Contact</button>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <pagination-component ref="pagination" v-on:changePage="fetchContacts($event)"></pagination-component>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-show="isCreating">
            <div class="col">
                <contact-form-component v-on:collapseEdit="toggleCreate()" :type="this.type" :reference="this.referenceId"></contact-form-component>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            'data': {
                type: Object,
				required: true
			}
		},
        data() {
            return {
                type: null,
                referenceId: null,
                contacts: [],
                isCreating: false,
                isLoading: true
            }
        },
        created() {
            this.type = this.data.type;
            this.referenceId = this.data.reference;
            this.fetchContacts();
        },

        mounted() {
            Event.$on('updateContactsList', () => {
                this.fetchContacts();
            });
        },

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

                fetch(route('api.contact.list', {type: this.type, reference: this.referenceId}) + '?page='+ page).then(response => response.json())
                    .then(response => {

                        this.contacts = 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>