<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: 'CompareAnswersIndex',
        mounted() {
            this.getAnswers()
        },
        methods: {
            getAnswers() {
                this.error = this.questions = null
                this.loading = true
                axios.get(`${Config.SERVER}api/answers/`)
                    .then((response) => {
                        console.log('Fetched answer stats from the server.')
                        this.appStore.store('answers', response.data)
                    })
                    .catch( error => {
                        console.log(error)
                        this.$router.push('/err_refused')
                    })
                axios.get(`${Config.SERVER}api/count/`)
                    .then((response) => {
                        console.log('Fetched user count from the server.')
                        this.appStore.store('count', response.data)
                    })
                    .catch( error => {
                        console.log(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>