<template>
    <div class="o-product__actions">
        <div class="o-product__amount">
            <quantity-input :quantity=quantity :min=1 :identifier=this.$props.productableId @change="itemQuantityChanged" />
        </div>
        <div class="o-product__add">
            <a class="c-button" @click.prevent="addToCartClicked()">
                <span class="c-button__text js-add-product-to-shoppingcart" data-test="add-product-to-shoppingcart">In winkelwagen</span>
            </a>
        </div>
    </div>
</template>

<script>
    import { ShoppingCartService } from '../../../services/shoppingCartService'
    import { CheckoutService } from "../../../services/checkoutService";
    import QuantityInput from '../forms/quantity';

    export default {
        props: {
            productableId: { type: Number, required: true},
            productableEnum: { type: Number, required: true}
        },
        components: {
            'quantityInput': QuantityInput
        },
        data: function () {
            return {
                quantity: 1,
                productable: this.productableEnum,
            }
        },
        methods: {
            /**
             * Triggered when the quantity input was changed.
             *
             * @param {Number} itemId The itemId of the quantity input.
             * @param {Number} amount The current amount of the quantity input
             */
            itemQuantityChanged: function(itemId, amount) {
                this.quantity = amount;
            },

            /**
             * Triggered when the add to cart button was clicked.
             *
             * @param {MouseEvent} event
             */
            addToCartClicked: function(event) {
                this.shoppingCartService.addProductToShoppingcart(this.$props.productableId, this.productable, this.quantity).then((response) => {
                    this.checkoutService.getCheckoutInformation().then((response) => {
                        const checkoutInformationData = response.data;
                        window.location.href = checkoutInformationData.cartRoute;
                    });
                }).catch((error) => {
                    console.error('productAction: ', error)
                })
            }
        },
        created: function() {
            this.shoppingCartService = new ShoppingCartService();
            this.checkoutService = new CheckoutService();
        },
    }
</script>