<template>


    <div class="variationWrap multiOption" v-if="question.is_multiple === 1" :class="[
            question.variations.length > 3 ? 'longVariations' : '',
            hasImages ? 'hasImages' : '',
        ]">

        <div class="variationRow" :class="{ hasImage: variation.image }" v-for="(variation,v) in question.variations">

            <input type="checkbox"
                   :name="questionName + '[]'"
                   :id="'id_variation_' + question.id + '_' + v"
                   :value="variation.id"
                   :true-value="variation.id"
                   v-model="question.answers"
                   :checked="question.answer == variation.id"
                   @change="updateQuestion(question)"
            >

            <label v-if="variation.image" :for="'id_variation_' + question.id + '_' + v">
                <img :src="variation.image" :alt="variation.label" class="variationImage" />
            </label>
            <label v-else :for="'id_variation_' + question.id + '_' + v"
                   v-html="variation.label + ' ' + '<i class=\'hoverFX\'></i>'"></label>

        </div> <!-- .for variation in question.variations -->

    </div>

    <div
            class="optionButtons radioButtons"
            :class="[
                question.variations.length > 3 && !hasImages ? 'selectArea' : '',
                hasImages ? 'hasImages' : '',
            ]"
            v-else
    >

        <chosen
                :options="question.variations"
                placeholder=""
                v-model="question.answer"
                class=""
                label="label"
                track-by="id"
                :id="'id_'  + question.id"
                :name="questionName"
                v-if="question.variations.length > 3 && !hasImages"

        ></chosen>

        <div class="labelButton" :class="{ hasImage: variation.image }" v-for="(variation,v) in question.variations" v-else>

            <input type="radio"
                   :name="questionName"
                   :id="'id_' + v + '_' + question.id"
                   :value="variation.id"
                   v-model="question.answer"
                   :checked="question.answer == variation.id"
                   @change="updateQuestion(question)"
            />

            <label v-if="variation.image" :for="'id_' + v + '_' + question.id">
                <img :src="variation.image" :alt="variation.label" class="variationImage" />
            </label>
            <label v-else :for="'id_' + v + '_' + question.id" v-html="variation.label"></label>

        </div>

    </div> <!-- .optionButtons -->

</template>

<script>


import { props, computed, methods } from "../mixins/fields";
import { debounce } from 'lodash';

export default {
    name: "variations",
    mixins: [props, computed, methods],
    computed: {
        hasImages() {
            return this.question.variations.some((variation) => !!variation.image)
        },
    },
    methods: {

        updateQuestion: debounce(function(question) {
            question = this.validate(question);
            this.$emit('update-question', question);
        }, 200),

        validate(question) {

            let canProceed = true;
            question.error_message = '';

            if(question.is_multiple === 1) {

                if (!question.answers.length && question.is_required) {
                    canProceed = false;
                }

            }else {

                if (!question.answer.length && question.is_required) {
                    canProceed = false;
                }

            }

            question.can_proceed = canProceed;
            question.can_proceed = this.canProceed(question, canProceed);

            return question;

        },

        canProceed(question) {

            if(question.cant_proceed_if.length) {

                let blocked = [];

                if(question.is_multiple === 1) {

                    blocked = question.answers.filter(answer => {

                        return question.cant_proceed_if.indexOf(answer) > -1 ? question : false;

                    });

                }else{

                    if(question.cant_proceed_if.indexOf(question.answer) > -1) {
                        blocked.push(question);
                    }

                }

                if(blocked.length) {
                    question.can_proceed = false;
                    question.error_message = 'Based on your answer, we cannot offer you medications for this condition.'
                }

            }

            return question.can_proceed;

        },

    }
}
</script>

<style lang="less">

    .variationWrap.multiOption {
        text-align: left !important;
    }

    .questionWrap .row .variationWrap.multiOption:not(.hasImages) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;

        @media @flyout {
            justify-content: flex-start;
        }

        .variationRow {
            display: inline-flex;
            padding: 0;
            margin: 0;
            position: relative;

            input[type="checkbox"] {
                position: absolute;
                left: -9999px;
                opacity: 0;
                visibility: hidden;
            }

            input[type="checkbox"] + label {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 5px 18px 5px 40px !important;
                min-width: 100px;
                min-height: 40px;
                width: auto;
                margin: 0 !important;
                .rems(17);
                line-height: 30px;
                font-weight: 400;
                text-align: center;
                cursor: pointer;
                color: var(--dark_primary);
                border: 1px solid var(--border_color);
                background: transparent;
                border-radius: 59px;
                transition: all 200ms linear;
                white-space: nowrap;

                &:before {
                    content: '';
                    position: absolute !important;
                    top: 50%;
                    left: 12px;
                    transform: translateY(-50%);
                    width: 18px;
                    height: 18px;
                    border: 1.5px solid var(--border_color);
                    background: #fff;
                    border-radius: 4px;
                    box-sizing: border-box;
                    display: block;
                    padding: 0;
                    margin: 0;
                    opacity: 1;
                }

                &:after {
                    content: '';
                    position: absolute !important;
                    top: 50%;
                    left: 12px;
                    transform: translateY(-50%);
                    width: 18px;
                    height: 18px;
                    background: transparent url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.5L7 11.5L12 5.5' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
                    border-radius: 4px;
                    box-sizing: border-box;
                    opacity: 0;
                    transition: opacity 200ms linear;
                    display: block;
                    padding: 0;
                    margin: 0;
                }

                .hoverFX {
                    display: none;
                }

                &:hover, &:focus-visible {
                    border-color: var(--dark_primary);
                }
            }

            input[type="checkbox"]:checked + label {
                color: #fff;
                border-color: var(--primary_color);
                background: var(--primary_color) !important;

                &:before {
                    border-color: #fff;
                    background: #fff;
                }

                &:after {
                    opacity: 1;
                }
            }
        }
    }

    .questionWrap {

        .row {

            .labelButton {
                label {
                    border-radius: 59px !important;
                }
            }

            &.longVariations {

                display: block !important;
                max-width: 324px;

                .labelButton {
                    width: 100% !important;
                    padding: 0 !important;
                }

            }

            .selectArea {
                width: 100%;
                max-width: 100%;
            }

            .chosen-single {
                border-radius: 37px;
            }
            .chosen-container.chosen-container-active.chosen-with-drop .chosen-single {
                border-radius: 37px 37px 0 0;
            }

            .chosen-drop {
                border-radius: 0 0 37px 37px;
            }

        }

    }

</style>
