<template>
    <div class="checkoutSectionWrap">
        <div
            class="row checkboxRow"
            :class="{ 'errorWrap showError': hasError }"
        >
            <input
                type="checkbox"
                name="agree_to_terms"
                id="termsAgree"
                :checked="terms === 1"
                @change="onTermsChange"
                :true-value="1"
                :false-value="0"
                @focus="clearError"
            />
            <label for="termsAgree">
                <strong>
                    Please confirm that you have read and agree with our
                    <a href="/customer-care/terms-and-conditions" target="_blank" class="termsLink">
                        terms &amp; conditions
                    </a>
                </strong>
            </label>
            <div class="validationMessage" v-if="hasError">
                <span>{{ errors.terms }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'terms-newsletter',

    props: {
        terms: {
            type: [Number, Boolean],
            default: 0
        },
        errors: {
            type: [Object, Array],
            default: () => ({})
        }
    },

    computed: {
        hasError() {
            return this.errors && this.errors.terms;
        }
    },

    methods: {
        onTermsChange(event) {
            this.$emit('update-terms', event.target.checked ? 1 : 0);
        },

        clearError() {
            this.$emit('clear-error', 'errors.terms');
        }
    }
};
</script>
