<template>
    <div class="o-cart  js-cart">
        <h2 class="o-cart__title">{{ trans('shop/cart').cart }}</h2>

        <div class="o-cart__list" data-test="cart-items">
            <cart-item
                data-test="cart-item"
                v-for="item in checkout.cartItems"
                v-bind="item"
                :key="item.id"
                :name="item.productable.displayName"
                :discount-description="item.discountDescription"
            />
        </div>

        <template v-if="hasCartItems">
            <div class="o-cart__summary" >
                <cart-summary/>
            </div>

            <div class="o-cart__submit">
                <a class="c-button" @click="order()" data-test="checkout">
                    <span class="c-button__text">{{ trans('shop/cart').checkout }}</span>
                </a>
            </div>
        </template>

        <template v-if="!hasCartItems">
            <p class="u-spacing-mt4 u-spacing-mb4" data-test="empty-cart-message">{{ trans('shop/cart').no_products }}</p>
            <a class="c-button" :href=checkout.continueShoppingRoute data-test="continue-shopping">
                <span class="c-button__text">{{ trans('shop/cart').continue_shopping }}</span>
            </a>
        </template>
    </div>
</template>

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

    //Other components
    import CartItem from './cartItem';
    import RegionSelect from '../forms/regionSelect';
    import CartSummary from "./cartSummary";

    export default {
        components: {
            'cartSummary': CartSummary,
            'cartItem': CartItem,
            'regionSelect': RegionSelect
        },
        data: function () {
            return {

            }
        },
        computed: {
            hasCartItems: function() {
                return (this.checkout.cartItems && this.checkout.cartItems.length > 0)
            },
            ...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
                me: "siteUser/me"
            })
        },
        methods: {
            error: function(error) {
                console.error('ShoppingCart:', error);
            },

            order: function() {
                //Send the user to a route where he can edit his details
                window.location.href = this.checkout.startCheckoutRoute;
            }
        },
        created: function() {
            this.$store.dispatch('siteUser/loadMe');
            this.$store.dispatch('g11n/translation/loadTranslations', [{ key: 'shop/cart' }]);
            this.$store.dispatch('checkout/loadCheckoutInformation');
        },
    };
</script>