<template>
    <div>
        <div class="o-confirmation__products" data-test="items">
            <div v-for="cartItem in checkout.cartItems" class="o-confirmation__product">
                <div class="o-confirmation__product-name">
                    <div>{{ cartItem.productable.displayName }}</div>
                    <div class="u-color-neutral--500" v-if="showItemDiscounts(cartItem) > 0">
                        <template v-for="(data, description) in cartItem.discountPriceMutations">{{ description }}<br></template>
                    </div>
                </div>
                <div class="o-confirmation__product-quantity">{{ cartItem.quantity }}</div>
                <div class="o-confirmation__product-price">
                    <span>{{ price(cartItem) }}</span>
                    <span class="iets-met--sub"><s>{{ subPrice(cartItem) }}</s></span>
                </div>
            </div>
        </div>


        <div class="o-confirmation__receipt">
            <div class="o-confirmation__receipt-row">
                <div class="o-confirmation__receipt-label">{{ trans('checkout').subtotal }}</div>
                <div class="o-confirmation__receipt-amount">{{ checkout.subtotalIncVatFormatted }}</div>
            </div>
        </div>

        <div class="o-confirmation__discounts" v-if="showCartDiscounts">
            <div class="o-confirmation__receipt-row" v-for="(data, description) in checkout.discountPriceMutations">
                <div class="o-confirmation__receipt-label u-color-neutral--500">{{ description }}</div>
                <div class="o-confirmation__receipt-amount">{{ data.priceIncFormatted }}</div>
            </div>
            <div class="o-confirmation__receipt-row">
                <div class="o-confirmation__receipt-label">{{ trans('checkout').shipping_costs }}</div>
                <div class="o-confirmation__receipt-amount">{{ checkout.shippingCosts.priceIncFormatted }}</div>
            </div>
        </div>

        <div class="o-confirmation__receipt">
            <div class="o-confirmation__receipt-row  u-fw-bold">
                <div class="o-confirmation__receipt-label">{{ trans('checkout').total }}</div>
                <div class="o-confirmation__receipt-amount">{{ checkout.totalFormatted }}</div>
            </div>

            <div class="o-confirmation__receipt-vat">
                <div v-for="vatRateTotal in checkout.vatRateTotals" class="o-confirmation__receipt-row">
                    <div class="o-confirmation__receipt-label  u-color-neutral--500">{{ vatRateTotal.name }}</div>
                    <div class="o-confirmation__receipt-amount  u-color-neutral--500">{{ vatRateTotal.vatTotalFormatted }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapState} from "vuex";

    export default {
        data: function() {
            return {}
        },
        computed: {
            ...mapGetters({
                trans: "g11n/translation/translation" //Maps the getter function "translation" in vuex module translations.js to a computed property called trans in this component
            }),
            ...mapState({
                checkout: "checkout", //Maps the state of the checkout vuex module to the computed property "checkout" on this component
            }),
        },
        methods: {
            price: function (cartItem) {
                if (cartItem.priceIncFormatted === cartItem.priceWithDiscountsIncFormatted) return cartItem.priceIncFormatted;
                return cartItem.priceWithDiscountsIncFormatted
            },
            subPrice: function (cartItem) {
                if (cartItem.priceIncFormatted === cartItem.priceWithDiscountsIncFormatted) return null;
                return cartItem.priceIncFormatted
            },
            showCartDiscounts: function() {
                return this.checkout && Object.keys(this.checkout.discountPriceMutations).length > 0;
            },
            showItemDiscounts: function(cartItem) {
                return Object.keys(cartItem.discountPriceMutations).length
            }
        }
    }
</script>

<style>

</style>