<template>
    <div class="results">
        <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
            <p class="risk-chance alert" v-if="risk >= 66">hoch</p>
            <p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p>
            <p class="risk-chance success" v-if="risk < 33">niedrig</p>
        <p>Auf Folgendes sollten Sie achten:</p>
        <div v-for="card in bad" v-bind:key="card.description" class="card-advice alert">
            <div class="card-advice-title">{{ card.title }}</div>
            <div class="card-advice-description">{{ card.description }}</div>
        </div>
        <p>Hier können Sie sich noch verbessern:</p>
        <div v-for="card in warning" v-bind:key="card.description" class="card-advice warning">
            <div class="card-advice-title">{{ card.title }}</div>
            <div class="card-advice-description">{{ card.description }}</div>
        </div>
        <p>Das machen Sie schon gut:</p>
        <div v-for="card in good" v-bind:key="card.description" class="card-advice success">
            <div class="card-advice-title">{{ card.title }}</div>
            <div class="card-advice-description">{{ card.description }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Results",
        mounted() {
            const summed = this.$store.state.answers.map((x, i) => {
                return x * this.$store.state.questions[i].multiplicator
            }).reduce(function(acc, current) {
                return acc + current
            })

            const sumMult = this.$store.state.questions.reduce(function(acc, current) {
                return acc + current.multiplicator
            }, 0)

            this.risk = Math.round(summed / sumMult)

            for(let i = 0; i < this.$store.state.answers.length; i ++) {
                if (this.$store.state.answers[i] < 33) {
                    this.good.push({
                        title: this.$store.state.questions[i].cards.good,
                        description: this.$store.state.questions[i].cards.information
                    })
                } else if (this.$store.state.answers[i] < 66) {
                    this.warning.push({
                        title: this.$store.state.questions[i].cards.okay,
                        description: this.$store.state.questions[i].cards.information
                    })
                } else {
                    this.bad.push({
                        title: this.$store.state.questions[i].cards.bad,
                        description: this.$store.state.questions[i].cards.information
                    })
                }
            }
        },
        data() {
            return {
                risk: -1,
                bad: [],
                warning: [],
                good: []
            }
        },
    }
</script>

<style scoped>
    .results {
        padding: 1em;
    }
    .card-advice {
        padding: 0.8em;
        border-radius: 0.8em;
        margin-bottom: 1em;
    }
    .card-advice .card-advice-title {
        font-weight: bolder;
        margin-bottom: 0.5em;
    }
    .card-advice.success {
        background: rgba(98, 225, 96, 0.25);
    }
    .card-advice.warning {
        background: rgba(255, 233, 36, 0.25);
    }
    .card-advice.alert {
        background: rgba(233, 74, 71, 0.25);
    }
    .risk-chance {
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
    }
    .risk-chance.success {
        color: #62E160;
    }
    .risk-chance.warning {
        color: orange;
    }
    .risk-chance.alert {
        color: #E94A47;
    }
</style>
