<template>
    <div class="card card-default no-border no-margin">
        <notification-component ref="notification"></notification-component>
        <loading-component  v-show="isLoading"></loading-component>
        <div class="card-block">
            <div class="row" v-show="!this.isEdit">
                <div class="col">
                    <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                        <h6 class="bold all-caps no-margin text-success">New Address</h6>
                        <div class="muted all-caps fs-12">Create A New Delivery Address</div>
                    </div>
                </div>
            </div>
            <form method="post" @submit.prevent="updateAddressBook">
                <div class="row">
                    <div class="col no-padding">
                        <div class="row">
                            <div class="col p-l-0">
                                <div class="form-group form-group-default required">
                                    <label class="muted">Reference</label>
                                    <input class="form-control" v-model="addressBook.reference">
                                </div>
                            </div>
                            <div class="col p-r-0">
                                <div class="form-group form-group-default required">
                                    <label class="muted">Phone Number</label>
                                    <input class="form-control" v-model="addressBook.contact">
                                </div>
                            </div>
                        </div>
                        <address-component v-on:changeAddress="updateAddress($event)"  :data="address()" ref="address"></address-component>
                        <div class="row">
                            <div class="col no-padding text-right">
                                <div v-show="!isEdit">
                                    <button type="button" @click="collapseEdit()" class="btn b-rad-none btn-default">Cancel</button>
                                    <button class="btn b-rad-none btn-success">Add Address</button>
                                </div>
                                <div v-show="isEdit">
                                    <button type="button" @click="collapseEdit()" class="btn b-rad-none btn-default">Cancel</button>
                                    <button class="btn b-rad-none btn-success">Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
    import notificationConstant from '../../../../js/notification'
    export default {
        props: {
            'id': {
                type: String
            },
            'data': {
                type: Object,
                default: null
            }
        },
        data(){
            return {
                addressBook: {
                    id: '',
                    company_id: '',
                    reference: '',
                    contact: '',
                    street_one: '',
                    street_two: '',
                    city: '',
                    state: '',
                    post_code: '',
                    country: ''
                },
                company_id: this.id,
                isLoading: false,
                isEdit: false
            }
        },
        created() {
            if(this.data !== null){
                this.isEdit = true;
                this.addressBook = this.data;
            } else {
                this.addressBook.company_id = this.company_id;
            }
        },
        methods: {
            updateAddressBook() {

                //turn on loading animation
                this.isLoading = true;


                var url = this.isEdit ? route('api.company.addressBook.update', {companyId: this.addressBook.company_id, id: this.addressBook.id}) : route('api.company.addressBook.create', {companyId: this.addressBook.company_id}),
                    method = this.isEdit ? 'put' : 'post';

                fetch(url, {
                    method: method,
                    body: JSON.stringify(this.addressBook),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then((response) => {
                    let notification = this.$refs.notification;
                    if(!this.isEdit){
                        Event.$emit('updateAddressBookList');
                        this.clearForm();
                        notification.title = notificationConstant.IMPORTER.ADDRESS_BOOK.TITLE;
                        notification.message = notificationConstant.IMPORTER.ADDRESS_BOOK.MESSAGE;
                    }
                    else {
                        notification.title = notificationConstant.IMPORTER.ADDRESS_BOOK.UPDATED.TITLE;
                        notification.message = notificationConstant.IMPORTER.ADDRESS_BOOK.UPDATED.MESSAGE;
                    }

                    notification.execute();

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

                    this.collapseEdit();
                })
            },
            updateAddress(address){
                this.addressBook.street_one = address.street_one;
                this.addressBook.street_two = address.street_two;
                this.addressBook.city = address.city;
                this.addressBook.state = address.state;
                this.addressBook.post_code = address.post_code;
                this.addressBook.country = address.country;
            },
            collapseEdit(){
                this.$emit('collapseEdit');
            },
            address(){
                return {
                    street_one: this.addressBook.street_one,
                    street_two: this.addressBook.street_two,
                    city: this.addressBook.city,
                    state: this.addressBook.state,
                    post_code: this.addressBook.post_code,
                    country: this.addressBook.country
                };
            },
            clearForm(){
                this.addressBook = {
                    id: '',
                    company_id: this.company_id,
                    reference: '',
                    contact: '',
                    street_one: '',
                    street_two: '',
                    city: '',
                    state: '',
                    post_code: '',
                    country: ''
                };

                this.$refs.address.resetAddress();
            }
        }
    }
</script>