<template>
    <div class="totalRow coupons fullWidth">
        <div class="sectionTitle" v-if="!basket.coupon_message">
            Discount code
        </div>

        <div class="costTitle">
            <!-- Applied Coupon Message -->
            <div class="couponMessage" v-if="basket.coupon_message">
                <div v-html="basket.coupon_message"></div>
                <div class="couponButton">
                    <a href="#" @click.prevent="onClearCoupon">Remove Code</a>
                </div>
            </div>

            <!-- Coupon Form -->
            <div class="couponForm" v-else>
                <div class="row">
                    <div class="inputWrap buttonInline">
                        <input
                            type="text"
                            name="code"
                            id="discount"
                            v-model="couponCode"
                            class="text"
                            placeholder="Enter code"
                        />
                        <button
                            type="button"
                            @click.prevent="onValidateCoupon"
                            id="couponCodeSubmit"
                            name="submit[apply_code]"
                            class="button"
                        >
                            Apply Code
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="cost">
            <span
                v-if="basket.coupon_deduct"
                v-html="'-' + formatPrice(basket.coupon_deduct)"
            ></span>
        </div>

        <!-- Error Message -->
        <div class="errorRow" v-if="hasError">
            <div class="error">
                <p v-html="errors.coupon_error"></p>
            </div>
        </div>

        <!-- Success Message -->
        <div class="successRow" v-if="hasSuccess">
            <div class="success">
                <p v-html="messages.coupon_success"></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'coupon',

    // 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);
            }
        }
    },

    props: {
        basket: {
            type: Object,
            required: true
        },
        errors: {
            type: Object,
            default: () => ({})
        },
        messages: {
            type: [Object, Array],
            default: () => ([])
        }
    },

    data() {
        return {
            couponCode: ''
        };
    },

    computed: {
        hasError() {
            return this.errors && this.errors.coupon_error;
        },
        hasSuccess() {
            return this.messages && this.messages.coupon_success;
        }
    },

    watch: {
        'basket.coupon_code': {
            immediate: true,
            handler(newVal) {
                this.couponCode = newVal || '';
            }
        }
    },

    methods: {
        onValidateCoupon() {
            // Emit event with the coupon code to update store
            this.$emit('update-coupon-code', this.couponCode);
            this.$emit('validate-coupon');
        },

        onClearCoupon() {
            this.$emit('clear-coupon');
        }
    }
};
</script>
