<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 { useResultsStore } from '@/stores/results.js'
    import ChevronDoubleRight from '@/components/icons/ChevronDoubleRight.vue'

    export default {
        setup() {
            const resultsStore = useResultsStore()

            return {
                resultsStore
            }
        },
        mounted() {
            this.getScores()
        },
        name: 'Statistics',
        components: {
            ChevronDoubleRight,
            Content,
            Header,
            TextFrame
        },
        methods: {
            getScores() {
                axios.get(`${Config.SERVER}api/scores/`)
                    .then((response) => {
                        console.log('Fetched score stats from the server.')
                        this.resultsStore.store('scores', 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.resultsStore.store('count', response.data)
                    })
                    .catch( error => {
                        console.log(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 mx-auto max-w-lg text-left">
                <thead class="text-xs text-gray-700 uppercase bg-lime-100">
                    <tr>
                        <th>

                        </th>
                        <th>
                            Playbook
                        </th>
                        <th>
                            Your Score (&#x25;)
                        </th>
                        <th>
                            Mean
                        </th>
                        <th>
                            Median
                        </th>
                        <th class="lowercase underline" title="Standard Deviation">
                            &sigma;*
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(stats, playbook, index) in this.resultsStore.scores" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b` : `bg-lime-100 border-b`">
                        <td v-if="this.resultsStore.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.resultsStore.results.all_playbooks[playbook]/this.resultsStore.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="6" class="text-center text-lg text-gray-600">From {{ this.resultsStore.count }} users</td>
                    </tr>
                </tbody>
            </table>
        </Content>
    </TextFrame>
</template>