<template>
    <div>
        <status :errors="errors" :successes="successes"/>

        <transition name="a-modal">
            <div class="o-modal" v-if="edit_address">
                <div class="o-modal__content">
                    <edit-address
                        v-bind="edit_address"
                        :header_text="this.headerText"
                        :close_text="trans('address').close"
                        :save_text="trans('address').save"
                        @close="edit_address = null"
                        @save="saveEditedAddress"
                    />
                </div>
            </div>
        </transition>

        <h2 class="c-title  u-spacing-mb4">{{ trans('my_account.addresses') }}</h2>
        <h3 class="c-subtitle">{{ trans('address').home_or_establishment_address }}</h3>
        <user-address v-if="accountAddress" v-bind="accountAddress" data-test="account-address">
            <div class="c-user-address__footer">
                <button class="c-user-address__button" type="button" @click="edit_address = accountAddress" data-test="edit-account-address">
                    {{ trans('address').edit }}
                </button>
                <text-toggle :active="!!(shippingAddress && accountAddress.id === shippingAddress.id)"
                             :active-text="trans('address').shipping_address"
                             :regular-text="trans('address').mark_as_shipping_address"
                             @click.native="markAsShippingAddress(accountAddress)"
                             data-test="mark-account-as-shipping-address"
                />
                <text-toggle :active="!!(invoiceAddress && accountAddress.id === invoiceAddress.id)"
                             :active-text="trans('address').invoice_address"
                             :regular-text="trans('address').mark_as_invoice_address"
                             @click.native="markAsInvoiceAddress(accountAddress)"
                             data-test="mark-account-as-invoice-address"
                />
            </div>
        </user-address>

        <h3 class="c-subtitle  u-spacing-mt6">{{ trans('address').other_addresses }}</h3>
        <user-address v-for="address in allButAccountAddress()" v-bind="address" :key="address.id" data-test="other-address">
            <div class="c-user-address__footer">
                <button class="c-user-address__button" type="button" @click="edit_address = address" data-test="edit-other-address">
                    {{ trans('address').edit }}
                </button>
                <button class="c-user-address__button" type="button" @click="deleteAddress(address)" data-test="delete-other-address">{{ trans('address').delete }}</button>
                <text-toggle
                    :active="!!(shippingAddress && address.id === shippingAddress.id)"
                    :active-text="trans('address').shipping_address"
                    :regular-text="trans('address').mark_as_shipping_address"
                    @click.native="markAsShippingAddress(address)"
                    data-test="mark-other-as-shipping-address"
                />

                <text-toggle
                    :active="!!(invoiceAddress && address.id === invoiceAddress.id)"
                    :active-text="trans('address').invoice_address"
                    :regular-text="trans('address').mark_as_invoice_address"
                    @click.native="markAsInvoiceAddress(address)"
                    data-test="mark-other-as-invoice-address"
                />
            </div>
        </user-address>
        <p v-if="(allButAccountAddress().length === 0)" data-test="no-other-addresses">{{ trans('address').no_other_addresses }}</p>

        <button class="c-button  u-spacing-mt4" @click="newAddressClicked" data-test="add-new-address">
            <span class="c-button__text">{{ trans('address').new }}</span>
        </button>
    </div>
</template>

<script>
    import {Address} from "../../global/models/Address";

    //Other components
    import UserAddress from './UserAddress'
    import EditAddress from "./EditAddress";
    import Status from "./Status";
    import TextToggle from "./TextToggle";

    import { mapGetters, mapState } from "vuex";

    export default {
        components: {
            'userAddress': UserAddress,
            'editAddress': EditAddress,
            'status': Status,
            'text-toggle': TextToggle
        },
        data: function () {
            return {
                edit_address: null,
                errors: [],
                successes: [],
            }
        },
        computed: {
            ...mapState('address', ['accountAddress', 'addresses', 'shippingAddress', 'invoiceAddress']),
            ...mapGetters({
                //Maps the getter function "translation" in vuex module translations.js to a computed property called trans in this component
                trans: "g11n/translation/translation",
                allButAccountAddress: "address/allButAccount"
            }),
            headerText: function() {
                if(this.edit_address.id === -1) {
                    //new address
                    return this.trans('address').new;
                } else {
                    //Existing address
                    return this.trans('address').edit;
                }
            }
        },
        methods: {
            saveEditedAddress: function(event) {
                let route = event.id === -1 ? 'address/store' : 'address/update';
                this.$store.dispatch(route, event).then((response) => {
                    this.$store.dispatch('address/loadAccountAddress');
                    this.$store.dispatch('address/loadShippingAddress');
                    this.$store.dispatch('address/loadInvoiceAddress');
                    this.$store.dispatch('address/loadAddresses');
                    this.handleSuccess(this.trans('address').saved)
                    this.edit_address = null;
                }).catch(
                    (error) => this.handleError(error, this.trans('address').save_fail)
                )
            },
            newAddressClicked: function() {
                this.edit_address = new Address();
            },
            deleteAddress: function(address) {
                this.$store.dispatch('address/delete', address).then((response) => {
                    this.reload();
                    this.handleSuccess(this.trans('address').deleted)
                }).catch(
                    (error) => this.handleError(error, this.trans('address').delete_fail)
                )
            },
            markAsShippingAddress: function(address) {
                this.$store.dispatch('address/markAsShippingAddress', address).then((response) => {
                    this.reload();
                })
            },
            markAsInvoiceAddress: function(address) {
                this.$store.dispatch('address/markAsInvoiceAddress', address).then((response) => {
                    this.reload();
                });
            },
            handleError: function(error, displayError = null) {
                console.error('handle error: ', error)
                this.errors = [displayError ? displayError : error];
            },
            reload: function() {
                this.$store.dispatch('address/loadAccountAddress');
                this.$store.dispatch('address/loadShippingAddress');
                this.$store.dispatch('address/loadInvoiceAddress');
                this.$store.dispatch('address/loadAddresses');
            },
            handleSuccess: function(success) {
                this.successes = [success];
            }
        },
        created: function() {
            this.$store.dispatch('g11n/translation/loadTranslations', [
                { key: 'my_account.addresses' },
                { key: 'address' },
            ]);

            this.reload();
        },
    };
</script>