<template>
    <div class="basketTotals">
        <div class="totalsRows">
            <!-- Discounts -->
            <div
                class="totalRow discounts"
                v-for="(discount, index) in basket.discounts_found"
                :key="'discount-' + index"
            >
                <div class="costTitle" v-html="discount.discount_name"></div>
                <div class="cost" v-html="'-' + formatPrice(discount.discount_amount)"></div>
            </div>

            <!-- Subtotal -->
            <div class="totalRow subTotal">
                <div class="costTitle">Sub total</div>
                <div class="cost" v-html="formatPrice(basket.cost_subtotal)"></div>
            </div>

            <!-- Coupon Section -->
            <coupon
                v-if="couponEnabled"
                :basket="basket"
                :errors="errors"
                :messages="messages"
                @update-coupon-code="$emit('update-coupon-code', $event)"
                @validate-coupon="$emit('validate-coupon')"
                @clear-coupon="$emit('clear-coupon')"
            />

            <!-- Delivery Section -->
            <delivery-options
                :basket="basket"
                :show-delivery-options="showDeliveryOptions"
                :current-delivery-name="currentDeliveryName"
                :errors="errors"
                :delivery-page="deliveryPage"
                @update-delivery="onUpdateDelivery"
            />

            <!-- VAT -->
            <div class="totalRow vat" v-if="showVat">
                <div class="costTitle">
                    VAT (inclusive)<span v-if="!vatEnabled"> at {{ vatRate }}%</span>
                </div>
                <div class="cost" v-if="!basket.no_vat" v-html="formatPrice(basket.cost_vat)"></div>
                <div class="cost" v-else>No VAT</div>
            </div>

            <!-- Total -->
            <div class="totalRow totals">
                <div class="costTitle">Total</div>
                <div class="cost" v-html="formatPrice(basket.cost_total)"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Coupon from './coupon.vue';
import DeliveryOptions from './delivery_options.vue';

export default {
    name: 'basket-totals',

    // Injected from parent checkout component (multiCurrency method).
    // Falls back to GBP formatting if used outside the checkout context.
    inject: {
        formatPrice: {
            default: () => (value) => {
                const amount = parseFloat(value) || 0;
                return '\u00A3' + amount.toFixed(2);
            }
        }
    },

    components: {
        Coupon,
        DeliveryOptions
    },

    props: {
        basket: {
            type: Object,
            required: true
        },
        currencies: {
            type: Object,
            default: () => ({})
        },
        errors: {
            type: Object,
            default: () => ({})
        },
        messages: {
            type: [Object, Array],
            default: () => ([])
        },
        couponEnabled: {
            type: Boolean,
            default: true
        },
        showVat: {
            type: Boolean,
            default: true
        },
        vatEnabled: {
            type: Boolean,
            default: true
        },
        vatRate: {
            type: [String, Number],
            default: 20
        },
        deliveryPage: {
            type: String,
            default: '/customer-care/delivery-information/'
        },
        hideInputs: {
            type: [Boolean, Number],
            default: false
        },
        showDeliveryOptions: {
            type: Boolean,
            default: false
        },
        currentDeliveryName: {
            type: String,
            default: ''
        }
    },

    methods: {
        onUpdateDelivery(deliveryId) {
            this.$emit('update-delivery', deliveryId);
        }
    }
};
</script>
