<template>
    <div class="container">
        <div class="row">
            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
            <div class="col bg-white padding-40 b-rad-lg" v-if="!message">
                <div class="row" v-for="(single_answer, index) in answers" :key="index" v-show="!$store.getters.isLoading(section)">
                    <div class="col">
                        <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                            <div class="col">
                                <small class="bold fs-10 text-danger">{{error}}</small>
                            </div>
                        </div>
                        <div class="row m-b-20">
                            <div class="col">
                                <h3>{{questions[index].question_text}}</h3>
                            </div>
                        </div>
                        <div class="row m-b-10" v-if="questions[index].question_type === 4" >
                            <div class="col" v-for="ans in questions[index].question_answers">
                                <div v-html="ans.display_text"></div>
                            </div>
                        </div>
                        <div class="row m-b-25" v-else-if="questions[index].question_type === 1" >
                            <div class="col" v-for="ans in questions[index].question_answers">
                                <div :class="'question-answers-' + index">
                                    <div class="btn btn-xs btn-block p-t-35 p-b-35 fs-16" :answerValue="ans.value" :answerId=ans.id @click="addClass($event, 'question-answers-' + index, index)">{{ ans.display_text }}</div>
                                </div>
                            </div>
<!--                            <div class="col" >-->
<!--                                <validation-wrapper-component :validator="$v.answers.$each[index]" class="row">-->
<!--                                    <div class="col" v-for="ans in questions[index].question_answers">-->
<!--                                        <div :class="'question-answers-' + index">-->
<!--                                            <div class="btn btn-xs btn-block p-t-35 p-b-35 fs-16" :answerValue="ans.value" :answerId=ans.id @click="addClass($event, 'question-answers-' + index, index)">{{ ans.display_text }}</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </validation-wrapper-component>-->
<!--                            </div>-->
                        </div>

                        <div class="row m-b-10" v-else-if="questions[index].question_type === 6" >
                            <div class="col" >
                                <validation-wrapper-component :validator="$v.answers.$each[index]" class="col">
                                    <div class="rating">
                                        <span
                                            v-for="(star, i) in stars"
                                            :key="i"
                                            @click="setRating(i + 1, index)"
                                            :class="{
                                            'filled': i < single_answer.answer,
                                            'unfilled': i >= single_answer.answer
                                            }"
                                        >
                                            <i class="fa fa-star"></i>
                                        </span>
                                    </div>
                                    <p>Your rating: {{ single_answer.answer }} stars</p>
                                </validation-wrapper-component>
                            </div>
                        </div>

                        <div class="row m-b-10" v-else>
                            <div class="col" >
                                <validation-wrapper-component :validator="$v.answers.$each[index]">
                                    <label>Answer</label>
                                    <input type="text" class="form-control" v-model="single_answer.answer" @input="formTouched = true">
                                </validation-wrapper-component>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" v-if="!$store.getters.isLoading(section)">
                    <div class="col text-center">
                        <div class="btn btn-lg btn-info b-rad-none padding-25 w-50 fs-20" :disabled="!$v.$dirty || !$v.$valid" @click="formTouched = true; submitForm()">Submit Feedback</div>
                    </div>
                </div>
            </div>
            <div class="col bg-white padding-40 b-rad-lg" v-else>
                <div class="d-flex justify-content-center align-items-center h-100">
                    {{ message }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required } from "vuelidate/lib/validators";
    export default {
        props: {
            questions:{
                type: Array,
                required: true
            },
            token: {
                type: String,
                required: true,
            }
        },
        data(){
            return {
                section: 'feedbackForm',
                answers: this.questions.map(function (item) {
                    return {
                        questionId: item.id,
                        answer: '',
                        answerId: 0
                    };
                }),
                error: null,
                message: '',
                stars: [1, 2, 3, 4, 5],
            }
        },
        validations: {
            answers: {
                $each: {
                    answer: { required }
                }
            }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.message = response.payload.data.message;
            },
            addClass(event, cls, index) {
                const div = event.target;
                this.answers[index].answer = div.getAttribute('answerValue');
                this.answers[index].answerId = div.getAttribute('answerId');
                this.removeClass(cls);
                div.classList.add('btn-success');
            },
            setRating(value, index) {
                this.answers[index].answer = value;
                this.answers[index].answerId = 0;
            },
            removeClass(cls) {
                document.getElementsByClassName(cls).forEach(el => {
                    const btnPrimaryEl = el.getElementsByClassName('btn-success')[0];
                    if (btnPrimaryEl) {
                        btnPrimaryEl.classList.remove('btn-success');
                    }
                });
            },
            submitForm() {
                this.parameters = {}
                this.parameters.answers = this.answers;
                this.parameters.token = this.token;
                this.submit(this.route('api.feedback.submit.questions'), 'post', this.section, true, true);
            }
        }
    }
</script>
<style scoped>
    .rating {
        font-size: 24px;
    }

    .rating span {
        cursor: pointer;
        margin-right: 5px;
        color: #ffc107; /* Yellow color for filled stars */
    }

    .rating span.unfilled {
        color: #ccc; /* Gray color for unfilled stars */
    }
</style>
