<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.getResults()
        },
        name: 'CompareResults',
        components: {
            ChevronDoubleRight,
            Content,
            Header,
            TextFrame
        },
        methods: {
            getResults() {
                axios.get(`${Config.SERVER}api/playbooks/`)
                    .then((response) => {
                        console.log('Fetched playbook stats from the server.')
                        this.resultsStore.store('playbooks', 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>
            Compare Results
        </Header>
        <Content>
            <p class="text-leader">
                Based on others who have taken this quiz, here are the playbooks of fellow travellers you are likely to meet along the way.
            </p>
            <table class="table-auto w-full max-w-sm mx-auto text-left">
                <thead class="text-xs text-gray-700 uppercase bg-lime-100">
                    <tr>
                        <th>

                        </th>
                        <th>
                            Playbook
                        </th>
                        <th>
                            Number
                        </th>
                        <th>
                            Percentage
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(number, playbook, index) in this.resultsStore.playbooks" :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 scope="col" class="py-1">
                            {{ number }}
                        </td>
                        <td scope="col" class="py-1">
                            {{ Math.round(100*number/this.resultsStore.count) }} &#x25;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="text-center text-lg text-gray-600">Out of {{ this.resultsStore.count }} users</td>
                    </tr>
                </tbody>
            </table>
        </Content>
    </TextFrame>
</template>