<template>
    <div class="bg-primary-600">
        <HRLayout :isMenuVisible="false">
            <template v-slot:header>
                <div class="flex justify-between py-6 px-4 items-center">
                    <GoToHome v-slot="{ navigate }">
                        <button
                            class="p-2 text-gray-700 bg-white rounded-xl"
                            @click="navigate"
                        >
                            <Icon name="left" class="w-5 h-5" />
                        </button>
                    </GoToHome>
                    <Avatar
                        class="w-12 h-12 rounded-full text-lg font-medium bg-gray-400"
                        :username="userFullName"
                        :src="user.imageProfileURL"
                    />
                </div>
            </template>
            <template v-slot:content>
                <Loader v-if="loading" class="m-auto" />
                <div v-else class="w-full h-full rounded-t-xl">
                    <div class="mx-3 h-full">
                        <div class="pt-6 flex items-center justify-between">
                            <div class="font-bold text-3xl text-hr-secondary">Evaluación</div>
                            {{ answers }}
                        </div>
                        <div class="bg-white p-5 rounded-xl mt-5 shadow-lg">
                            <p class="text-hr-secondary font-bold text-lg mb-2">{{ evaluation.title }}</p>
                            <p class="text-hr-secondary text-md">{{ evaluation.description }}</p>
                        </div>
                        <div class="bg-white rounded-xl p-5 mt-8 shadow-lg overflow-hidden">
                            <div
                                v-if="!finished"
                                class="flex transition-all duration-300"
                                :style="{ 'transform': `translateX(${-questionIndex * 100}%)` }"
                            >
                                <QuestionItem
                                    v-for="(question, index) in questions"
                                    :key="index"
                                    :question="question"
                                    :index="questionIndex"
                                    v-model="answers"
                                    class="flex-none w-full"
                                />

                            </div>
                            <div v-if="finished" class="p-8 text-center">
                                <p class="text-xl text-hr-secondary font-bold">Respuestas enviadas</p>
                                <p class="text-xl text-hr-secondary font-bold">Gracias!</p>
                                <GoToHome v-slot="{ navigate }">
                                    <button
                                        class="p-2 text-white bg-hr-secondary rounded-xl text-sm px-3 mt-4"
                                        @click="closeEvaluation(navigate)"
                                    >
                                        Salir
                                    </button>
                                </GoToHome>
                            </div>

                            <div class="flex justify-between mt-8">
                                <button
                                    v-if="hasPrevQuestion && !finished"
                                    class="border border-hr-secondary text-sm text-hr-secondary font-medium px-4 py-2 rounded-xl"
                                    @click="prevQuestion"
                                >
                                    Atrás
                                </button>
                                <button
                                    v-if="hasNextQuestion && !finished"
                                    class="border border-hr-secondary text-sm text-hr-secondary font-medium px-4 py-2 rounded-xl"
                                    @click="nextQuestion"
                                >
                                    Siguiente
                                </button>
                                <button
                                    v-if="isLastQuestion && !finished"
                                    v-tap @tap="sendAnswers"
                                    class="bg-hr-secondary text-sm text-white font-medium px-4 py-2 rounded-xl"
                                >
                                    Enviar
                                </button>
                            </div>
                        </div>
                    </div>
                    <ProgressBar v-if="!finished" class="mx-5" :totalQuestions="totalQuestions" :index="questionIndex" :progress="progress" />
                </div>
            </template>
        </HRLayout>
    </div>
</template>

<script>
    import HRLayout from '@/hr/layouts/main';
    import Loader from '@/hr/components/loader';
    import { getters } from "@/store";
    import { Evaluation } from "@/api/models";
    import { getFullName } from "@/utils/employees.js";
    import GoToHome from '@/components/go-to-home';
    import Avatar from "@/components/base/avatar";
    import QuestionItem from "./QuestionItem"
    import ProgressBar from './ProgressBar';

    export default {
        name: 'Evaluation',
        components: {
            Loader,
            GoToHome,
            Avatar,
            ProgressBar,
            HRLayout,
            QuestionItem
        },
        data() {
            return {
                questionIndex: 0,
                evaluation: {},
                finished: false,
                loading: false,
                answers: [],
            }
        },
        computed: {
            user() {
                return getters.employee;
            },
            userFullName() {
                return getFullName(this.user);
            },
            questions() {
                return this.evaluation?.form?.questions;
            },
            activeQuestion() {
                return this.questions[this.questionIndex];
            },
            hasPrevQuestion() {
                return this.questionIndex > 0;
            },
            hasNextQuestion() {
                 return this.questions !== undefined && this.questionIndex < this.questions.length - 1;
            },
            totalQuestions() {
                if(this.questions !== undefined) {
                    return this.questions.length;
                }
            },
            isLastQuestion() {
                return (this.questionIndex + 1) === this.totalQuestions;
            },
            progress() {
                console.log("ANSWERS", this.answers)
                if(this.questions !== undefined) {
                    return (this.questionIndex + 1) / this.questions.length * 100
                }
            }
        },
        methods: {
            async getEvaluations() {
                await Evaluation.all();
                //await Evaluation.create({employeeId: "95194a23-9e04-4487-af3f-52cf10002d27"});
                try {
                    this.loading = true;
                    const { evaluation } = await Evaluation.find(this.$route.params.id);
                    this.evaluation = evaluation;
                    this.loading = false;
                } catch (error) {
                    console.log(error);
                }
            },
            async sendAnswers() {
                try {
                     await Evaluation.create(
                        {
                            answers: [
                                {
                                    questionId: "6a9ad778-aacf-4e60-9610-37a767700b9f",
                                    questionOptionIds:[
                                        "1bc35f6c-900a-4764-84ee-23531e46e638",
                                    ],
                                    answer: null
                                },
                            ]
                        }, {param: this.$route.params.id },);
                } catch (err) {
                    console.log(err);
                }

                this.finished = true;
            },
            prevQuestion() {
                if (this.hasPrevQuestion) {
                    this.questionIndex--;
                } else {
                    this.questionIndex = 0;
                }
            },
            nextQuestion() {
                if (this.hasNextQuestion) {
                    this.questionIndex++;
                } else if (this.questions){
                    this.questionIndex = this.questions.length - 1;
                }
            },
            closeEvaluation(callback) {
                callback();
                this.finished = false;
                this.questionIndex = 0;
            }
        },
        mounted() {
            this.getEvaluations();
        }
    }
</script>