Vue.component('account_addresses', {
    template: `
<div class="account_addresses">

    <div class="loader" v-if="is_loading"></div>

    <div>

        <div class="addresses">

            <!--<v-btn @click.native.stop="create_dialog = true" style="margin:5px 0">-->
                <!--<v-icon style="margin-right:10px;">fas fa-plus</v-icon> Create a new address</v-btn>-->

            <div class="row">


                <div class="col-xs-12 col-md-6 col-lg-3">
                    <div class="address create" @click="createAddress" v-b-modal.modal-create-address>

                            + Add address

                    </div>
                </div>
                

                <div class="col-xs-12 col-md-6 col-lg-3" v-for="address in addresses" v-bind:key="address.id">
                    <div class="address" v-bind:class="{'selected': address == selected_address && selection_mode}" @click="selected_address = address">

                        <div id="title">
                            {{address.title}}
                        </div>
                        <div id="address">

                            Building: {{address.building}}, Road: {{address.road}}, Block: {{address.block}}, {{address.area}}
                            <div id="memo">{{address.memo}}</div>
                            <div id="actions">

                                <b-btn size="sm" v-on:click="setAsDefault(address)" v-if="!address.is_default && !selection_mode">Set as primary</b-btn>
                                <b-btn size="sm"  variant="success" v-if="address.is_default && !selection_mode">Primary</b-btn>
                                <b-btn size="sm" v-on:click="updateAddress(address)" v-b-modal.modal-create-address>Update</b-btn>
                                <b-btn size="sm" variant="danger"  v-on:click="deleteAddress(address.id)">Delete</b-btn>

                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>

<b-modal id="modal-create-address" v-model="create_dialog" size="xlg" hide-header hide-footer centered>
            <account_addresses_create v-on:cancel="create_dialog = false" v-bind:api_url="api_url" v-bind:site_url="site_url" v-on:success="create_dialog=false;loadAddresses();" v-bind:address_to_update="update_address"></account_addresses_create>
</b-modal>


</div>
`,
    props: ['api_url', 'site_url', 'selection_mode'],
    data: function () {
        return {
            is_loading: true,
            addresses: [],
            create_dialog: false,
            update_address: null,
            selected_address: null
        }

    },

    methods: {

        loadAddresses: function () {

            var thisCompo = this;
            this.is_loading = true;

            axios.post(thisCompo.api_url + '/users/addresses/list', {
                access_token: getCookie('access_token'),
            })
                .then(function (response) {
                    thisCompo.addresses = response.data.data;
                    thisCompo.is_loading = false;

                    for(var i in thisCompo.addresses) {
                        var thisAddr = thisCompo.addresses[i];
                        if(thisAddr.is_default) {
                            thisCompo.selected_address = thisAddr;
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        deleteAddress: function (addressId) {

            var thisCompo = this;
            this.is_loading = true;

            axios.post(thisCompo.api_url + '/users/addresses/delete', {
                'access_token': getCookie('access_token'),
                'address_id': addressId,
            })
                .then(function (response) {
                    if (response.data.success) {
                        thisCompo.loadAddresses();
                    }
                    thisCompo.is_loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        setAsDefault: function (address) {

            var thisCompo = this;
            this.is_loading = true;

            axios.post(thisCompo.api_url + '/users/addresses/set_as_default', {
                'access_token': getCookie('access_token'),
                'address_id': address.id,
            })
                .then(function (response) {
                    if (response.data.success) {
                        thisCompo.loadAddresses();
                    }
                    thisCompo.is_loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        updateAddress: function(address) {
            this.update_address = address;
            this.create_dialog = true;
        },
        createAddress: function() {
            this.update_address = null;
            this.create_dialog = true;
        }
    },
    watch: {
        api_url: {
            handler: function (newVal, oldVal) {
                this.loadAddresses();
            }
        },
        selected_address: {
            handler: function (newVal, oldVal) {
                this.$emit('address_update', newVal);
            }
        }
    },
    created: function () {
        this.loadAddresses();
    }
});