<script>
    import axios from 'axios'
    import Config from '@/config.js'
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import { useAppStore } from '@/stores/app.js'
    import ChevronDoubleRight from '@/components/icons/ChevronDoubleRight.vue'

    export default {
        setup() {
            const appStore = useAppStore()

            return {
                appStore
            }
        },
        mounted() {
            this.getScores()
        },
        name: 'Statistics',
        components: {
            ChevronDoubleRight,
            Content,
            Header,
            TextFrame
        },
        methods: {
            getScores() {
                axios.get(`${Config.SERVER}api/scores/`)
                    .then((response) => {
                        this.error = false
                        this.appStore.store('scores', response.data)
                    })
                    .catch( error => {
                        this.$router.push('/err_refused')
                    })
                axios.get(`${Config.SERVER}api/count/`)
                    .then((response) => {
                        this.error = false
                        this.appStore.store('count', response.data)
                    })
                    .catch( error => {
                        this.$router.push('/err_refused')
                    })
            }
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            Statistics
        </Header>
        <Content>
            <p class="text-leader">
                Sometimes, it can help to have some additional insight into the likelihood of meeting different people.
                Or, indeed, it can provide insight into how the questions we ask of each other bias the way we perceive the world.
            </p>
            <table class="table-auto w-full max-w-lg mx-auto text-left">
                <thead class="text-xs text-gray-700 uppercase bg-lime-100 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th>

                        </th>
                        <th>
                            Playbook
                        </th>
                        <th>
                            Your Score
                        </th>
                        <th>
                            Mean Score
                        </th>
                        <th>
                            Median Score
                        </th>
                        <th>
                            Standard Deviation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(stats, playbook, index) in this.appStore.scores" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
                        <td v-if="this.appStore.results.playbooks.some(obj => obj.hasOwnProperty(playbook))">
                            <ChevronDoubleRight/>
                        </td>
                        <td v-else>

                        </td>
                        <td scope="col" class="py-1 capitalize">
                            The {{ playbook }}
                        </td>
                        <td>
                            {{ Math.round(100*this.appStore.results.all_playbooks[playbook]/this.appStore.results.max_score) }}
                        </td>
                        <td scope="col" class="py-1">
                            {{ Math.round(stats.mean * 100) / 100 }}
                        </td>
                        <td scope="col" class="py-1">
                            {{ Math.round(stats.median * 100) / 100 }}
                        </td>
                        <td>
                            {{ Math.round(stats.standard_deviation * 100) / 100 }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="text-center text-lg">Out of a total {{ this.appStore.count }} users</td>
                    </tr>
                </tbody>
            </table>
        </Content>
    </TextFrame>
</template>