<template>
    <div class="quick-order-modal" v-if="visible" @click.self="close" @keydown.esc="close" tabindex="0" ref="modal">
        <div class="quick-order-modal__dialog">
            <h2 class="quick-order-modal__title">Consultation Required</h2>
            <p class="quick-order-modal__text">
                This product requires a short consultation before it can be added to your basket.
            </p>
            <p class="quick-order-modal__text">
                You'll need to answer a few questions so our pharmacist can check this product is suitable for you.
            </p>
            <div class="quick-order-modal__actions">
                <a :href="safeAssessmentUrl" class="quick-order-modal__continue button">
                    Continue to consultation &rarr;
                </a>
                <button type="button" class="quick-order-modal__cancel buttonAlt" @click="close">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'QuickOrderModal',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        assessmentUrl: {
            type: String,
            default: ''
        },
    },
    computed: {
        safeAssessmentUrl() {
            if (this.assessmentUrl.startsWith('/') || this.assessmentUrl.startsWith('https://')) {
                return this.assessmentUrl;
            }
            return '#';
        }
    },
    watch: {
        visible(val) {
            if (val) {
                this.$nextTick(() => {
                    this.$refs.modal.focus();
                });
            }
        }
    },
    methods: {
        close() {
            this.$emit('close');
        }
    }
}
</script>
