<template>
    <div class="o-cart__item">
        <div class="o-cart__item-desc">
            <h3 class="o-cart__item-name">{{ name }}</h3>
            <p class="o-cart__item-discount" v-if="displayDiscounts">
                <template v-for="(data, description) in discountPriceMutations">{{ description }}<br></template>
            </p>
        </div>
        <div class="o-cart__item-quantity">
            <quantity-input :quantity="quantity" :identifier="id" :min="1" @change="itemQuantityChanged"
                            data-test="cart-item-quantity"/>
        </div>
        <div class="o-cart__item-price" data-test="cart-item-price">
            <span>{{ price }}</span><br>
            <span class="o-cart__item-price--sub" v-if="subPrice">{{ subPrice }}</span>
        </div>

        <div class="o-cart__item-remove js-remove-item-from-shoppingcart" @click="removeItem()"
             data-test="cart-item-remove">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
                <path fill="currentColor" d="M.2 1.2l1-1 10.6 10.6-1 1L.2 1.2z"/>
                <path fill="currentColor" d="M10.8.2l1 1L1.2 11.8l-1-1L10.8.2z"/>
            </svg>
        </div>
    </div>
</template>

<script>
//Services
import {ShoppingCartService} from '../../../services/shoppingCartService'

//Other components
import QuantityInput from '../forms/quantity';

export default {
    components: {
        'quantityInput': QuantityInput
    },
    props: {
        id: {type: Number},
        name: {type: String},
        quantity: {type: Number},
        priceIncFormatted: {type: String}, //Formatted price
        priceWithDiscountsIncFormatted: {type: String, default: null}, //Formatted price
        discountPriceMutations: {required: true}
    },
    data: function () {
        return {}
    },
    computed: {
        displayDiscounts: function () {
            return Object.keys(this.discountPriceMutations).length > 0
        },
        price: function () {
            if (this.priceIncFormatted === this.priceWithDiscountsIncFormatted) return this.priceIncFormatted;
            return this.priceWithDiscountsIncFormatted
        },
        subPrice: function () {
            if (this.priceIncFormatted === this.priceWithDiscountsIncFormatted) return null;
            return this.priceIncFormatted
        }
    }, methods: {
        /***
         * Triggered when the item's quantity was changed.
         * Tells the backend to update the quantity of the shopping cart item.
         * And emits a change event towards parents.
         *
         * @param itemId
         * @param amount
         */
        itemQuantityChanged: function (itemId, amount) {
            this.shoppingCartService.setItemQuantityInShoppingcart(this.id, amount).then(function () {
                this.$store.dispatch('checkout/loadCheckoutInformation');
            }.bind(this))
        },

        /**
         * Triggered when the remove button is pressed. Tells the backend to remove the shopping cart item.
         * And then emits a "removed" event to the parents so they can remove this item.
         */
        removeItem() {
            this.shoppingCartService.removeItemFromShoppingcart(this.id).then(function () {
                this.$store.dispatch('checkout/loadCheckoutInformation');
            }.bind(this))
        }
    },
    created: function () {
        this.shoppingCartService = new ShoppingCartService();
    },
};
</script>