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

    button {
      width: 80%;
      margin-bottom: 5%;
    }    
    
    .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;
    }

    /*.bottom-aligned {
        position: absolute;
        left: 0;
        right:    0;
        bottom:   0;
        border: 1px solid black;
    }*/
</style>

<template>
    <div class="question">
        <p>{{ question }}</p>
        <div class="button-wrapper bottom-aligned">
            <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>
        </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 {
                    this.$store.commit("setSurveyCompleted")
                    router.push('/results')
                }
            }
        },
        mounted () {
            document.addEventListener("backbutton", this.goBack, false);
        },
        beforeDestroy () {
            document.removeEventListener("backbutton", this.goBack);
        }
    }
</script>
