<script>
    import axios from 'axios'
    import Config from '@/config.js'
    import { useQuestionStore } from '@/stores/questions.js'
    import { useAnswersStore } from '@/stores/answers.js'
    import { useAppStore } from '@/stores/app.js'

    export default {
        setup() {
            const questionStore = useQuestionStore()
            const answersStore = useAnswersStore()
            const appStore = useAppStore()

            return {
                questionStore,
                answersStore,
                appStore
            }
        },
        name: 'QuestionIndex',
        created() {
            if (!this.appStore.hasData) {
                this.getQuestions()
            }
        },
        data() {
            return {
                error: null,
                loading: false,
                questions: null
            }
        },
        methods: {
            getQuestions() {
                this.error = this.questions = null
                this.loading = true
                axios.get(`${Config.SERVER}api/questions/`)
                    .then((response) => {
                        this.error = false
                        this.questionStore.storeQuestions(response.data)
                        this.appStore.toggleData()
                    })
                    .catch( error => {
                        this.$router.push('/err_refused')
                    })
            }
        }
    }
</script>
<template>
    <div>
        <router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
            <Transition mode="out-in"
                enter-active-class="transition-all duration-300 origin-center ease-in"
                enter-from-class="transform opacity-0 md:scale-95"
                leave-active-class="transition-all duration-300 origin-center ease-out"
                leave-to-class="transform opacity-0 md:scale-95"
            >
                <component :is="Component" :key="route.path"/>
            </Transition>
        </router-view>
    </div>
</template>