<script>
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import { useResultsStore } from '@/stores/results.js'

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

            return {
                resultsStore
            }
        },
        name: 'Results',
        components: {
            Content,
            Header,
            TextFrame
        },
        methods: {
            renderAnimals(rawText) {
                var output = ''
                var length = rawText.length
                for (var index = 0; index < length; index++) {
                    var article = ['a','e','i','o','u'].includes(rawText[index].slice(0,1)) ? 'an' : 'a'
                    if (index == length - 2) {
                        var conjunction = ', or '
                    } else if (index == length -1) {
                        var conjunction = '.'
                    } else {
                        var conjunction = ', '
                    }
                    output += `${article} ${rawText[index]}${conjunction}`
                }
                return output
            }
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            <span v-if="this.resultsStore.results.playbooks.length > 1">Your Results</span>
            <span v-else>Your Result</span>
        </Header>
        <Content>
            <article class="prose">
                <section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-olive-600 border-opacity-25` : ``">
                    <h2 class="flex justify-between">
                        <span class="uncial-antiqua align-bottom">
                            <span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span>
                        </span>
                        <span class="text-sm">Pages {{ Object.values(playbook)[0].pages }}</span>
                    </h2>
                    <p class="text-leader" v-html="Object.values(playbook)[0].flavour"/>
                    <p v-html="Object.values(playbook)[0].blurb"/>
                    <p>
                        You are alive. Your care is <strong v-html="Object.values(playbook)[0].care"></strong>.
                    </p>
                    <p>
                        Your animal form is {{ renderAnimals(Object.values(playbook)[0].animals) }}
                    </p>
                    <h4>
                        You can always do the following:
                    </h4>
                    <ul>
                        <li class="my-0 py-0 mx-3" v-for="(action, index) in Object.values(playbook)[0].actions" :key="Object.keys(playbook)[0] + index" v-html="action"></li>
                    </ul>
                </section>
            </article>
        </Content>
    </TextFrame>
</template>