<template>
    <div class="c-cart-summary">
        <div class="c-cart-summary__subtotal">
            <div class="c-cart-summary__row">
                <div class="c-cart-summary__label">{{ trans('shop/cart').subtotal }}</div>
                <div class="c-cart-summary__value">{{ checkout.subtotalIncVatFormatted }}</div>
            </div>
            <div class="c-cart-summary__row">
                <div class="c-cart-summary__label">{{ trans('shop/cart').ship_to }}</div>
                <div class="c-cart-summary__value">
                    <region-select name='shipping_country' :selected="shippingAddressIso3" @change="regionSelected" data-test="shipping-country"/>
                </div>
            </div>
            <div class="c-cart-summary__row">
                <div class="c-cart-summary__label">{{ trans('shop/cart').shipping_costs }}</div>
                <div class="c-cart-summary__value" data-test="shipping-costs">{{ checkout.shippingCosts.priceIncFormatted }}</div>
            </div>
        </div>
        <div class="c-cart-summary__subtotal" v-if="displayCartDiscounts">
            <div class="c-cart-summary__row" v-for="(data, description) in checkout.discountPriceMutations">
                <div class="c-cart-summary__label  is-faded  is-small">{{ description}} </div>
                <div class="c-cart-summary__value  is-faded  is-small">{{ data.priceIncFormatted }}</div>
            </div>
        </div>
        <div class="c-cart-summary__total">
            <div class="c-cart-summary__row">
                <div class="c-cart-summary__label">{{ trans('shop/cart').total }}</div>
                <div class="c-cart-summary__value">{{ checkout.totalFormatted }}</div>
            </div>

            <div class="c-cart-summary__row" v-for="vatRateTotal in checkout.vatRateTotals">
                <div class="c-cart-summary__label  is-faded">{{ vatRateTotal.name }}</div>
                <div class="c-cart-summary__value  is-faded">{{ vatRateTotal.vatTotalFormatted }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import RegionSelect from "../forms/regionSelect";
    import {mapGetters, mapState} from "vuex";

    export default {
        components:{
            'regionSelect': RegionSelect
        },
        props: {
            className: {type: String, default: ''},
        },
        data: function () {
            return {
                translations: { }
            }
        },
        computed: {
            ...mapGetters({
                trans: "g11n/translation/translation", //Maps the getter function "translation" in vuex module g11n.js to a computed property called trans in this component
                shippingAddressIso3: "checkout/shippingAddressIso3"
            }),
            ...mapState({
                checkout: "checkout", //Maps the state of the checkout vuex module to the computed property "checkout" on this component
            }),
            displayCartDiscounts: function() {
                return Object.keys(this.checkout.discountPriceMutations).length > 0
            }
        },
        methods: {
            regionSelected: function(data) {
                const shippingAddress = {
                    id: null,
                    street: null,
                    house_number: null,
                    postal_code: null,
                    city: null,
                    telephone: null,
                    country_iso3: data,
                };
                this.$store.dispatch('checkout/updateShippingAddress', shippingAddress);
            }
        },
        created() {
            this.$store.dispatch('g11n/translation/loadTranslations', [{ key: 'shop/cart' }]);
        },
    }
</script>