<style scoped>
    .question {
      padding: 0.5em;
    }

    button {
      display: block; 
      width: 80%;
      margin: 0 auto;
      margin-bottom: 5%;
    }    
    
</style>

<template>
    <div class="question">
        <p>{{ question }}</p>
        <div class="buttons">
            <div v-if="type === 'yesno'" class="question-choice">
                <button v-on:click="$store.commit('nextQuestion')">Ja</button>
                <button v-on:click="$store.commit('nextQuestion')">Nein</button>
            </div>
            <div v-if="type === 'slider'" class="question-slider">
                <p>{{ selection }}</p>
                <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
            </div>
            <div v-if="type === 'choice'" class="question-options">
                <button v-bind:key="answer.text"
                        v-for="answer in answers"
                        v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
            </div>
            <router-link v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
            <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
        </div>
    </div>
</template>

<script>
    import router from "@/router";

    export default {
        name: "Question",
        props: {
            type: String,
            question: String,
            answers: Array
        },
        data() {
            return {
                selection: 0
            }
        },
        methods: {
            answerQuestion(value) {
                this.$store.commit('answerQuestion', {
                    id: this.$route.params.id,
                    answer: value
                })

                if (this.$route.params.id < this.$store.state.questions.length - 1) {
                    const nextQuestion = parseInt(this.$route.params.id) + 1
                    this.$router.push("/questionnaire/" + nextQuestion)
                }
                else {
                    router.push('/results')
                }
            },
            goBack() {
                if (this.$route.params.id > 0) {
                    const previousQuestion = parseInt(this.$route.params.id) - 1
                    this.$router.push("/questionnaire/" + previousQuestion)
                }
            },
        },
        mounted () {
            document.addEventListener("backbutton", this.goBack, false);
        },
        beforeDestroy () {
            document.removeEventListener("backbutton", this.goBack);
        }
    }
</script>

<style scoped>
    .slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 1em;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 2.5em;
        height: 2.5em;
        background: #e94a47;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 2.5em;
        height: 2.5em;
        background: #e94a47;
        cursor: pointer;
    }

    .buttons {
        position: absolute;
        bottom: 0;
        padding: 1em;
    }
</style>
