<template>
    <div class="px-6">
        <p class="text-lg text-hr-secondary font-medium">
            {{ index + 1 }}. {{ question.name }}
            <span v-if="question.required" class="text-red-500">*</span>
            {{ questionValue }}
        </p>
        <div v-if="question.type === 'stars'">
            <div class="mt-8">
                <div class="flex justify-center mx-10">
                    <star-rating
                        :rounded-corners="true"
                        :show-rating="false"
                        @rating-selected="setRating"
                        :star-size="35"
                        active-color="#55E5BD"
                        :padding="5"
                    />
                </div>
                <div class="flex justify-between">
                    <p>Poco</p>
                    <p>Mucho</p>
                </div>
            </div>
        </div>
        <div v-else-if="question.type === 'text'">
            <textarea
                v-model="questionValue"
                rows="5"
                class="w-full mt-8 form-textarea rounded-xl bg-gray-200"
                placeholder="Escribe tu respuesta"
            ></textarea>
        </div>
        <div v-else-if="question.type === 'radio'">
            <div class="mt-8">
                <BaseRadioInput
                    :options="question.options"
                    @input="radioInputOption"
                />
            </div>
        </div>
        <div v-else-if="question.type === 'check'">
            <BaseCheckBox
                class="space-y-6 mt-8"
                :options="question.options"
                @input="multipleInputOptions"
            />
        </div>
        <div v-else-if="question.type === 'range'">
            <Slider :max="parseInt(question.options[0].option, 10)" @input="rangeInput" />
        </div>
        <div v-else-if="question.type === 'faces'" class="flex justify-evenly">
            <div v-for="(face, index) in feedback" :key="index" class="mt-10">
                <div class="bg-gray-200 p-2 rounded-xl" v-tap @tap="selectFace(face.label)" :class="[questionValue === face.label && 'bg-primary-300']">
                    <Icon :name="face.icon" class="w-6 h-6" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import StarRating from 'vue-star-rating';
import Slider from "@/components/custom/slider";
import BaseCheckBox from "@/components/base/checkbox";
import BaseRadioInput from "@/components/base/radio-input";

    const feedback = [
        {
            label: 'awful',
            icon: 'awful-smile'
        },
        {
            label: 'bad',
            icon: 'bad-smile'
        },
        {
            label: 'normal',
            icon: 'normal-smile'
        },
        {
            label: 'fine',
            icon: 'fine-smile'
        },
        {
            label: 'perfect',
            icon: 'perfect-smile'
        }
    ]

export default {
    name: "QuestionItem",
    props: {

        question: Object,
        index: Number
    },
    components: {
        StarRating,
        Slider,
        BaseCheckBox,
        BaseRadioInput
    },
    data() {
        return {
            feedback,
            rating: 0,
            questionValue: null,
            localAnswers: [],
        }
    },
    watch: {
        questionValue(newValue) {
            this.$emit('input', newValue)
        },
    },
    methods: {
        setRating(rating) {
            this.questionValue = rating;
        },
        selectFace(face) {
            this.questionValue = face;
        },
        multipleInputOptions(options) {
            this.questionValue = options;
        },
        radioInputOption(id) {
            this.questionValue = id;
        },
        rangeInput(number) {
            this.questionValue = number;
        }
    },
}
</script>