<template>
    <div class="questionnaire">
        <img id="back-button" v-if="$route.params.id != 0" v-on:click="goBack()" src="../assets/arrow-circle-left-outline.svg">
        <div id="status-bar-wrapper">
          <div class="progress">
              <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
          </div>

        </div>
        <Question
                v-bind:type="$store.state.questions[$route.params.id].type"
                v-bind:question="$store.state.questions[$route.params.id].question"
                v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
    </div>
</template>

<script>
    import Question from "@/components/Question";
    export default {
        name: "Questionnaire",
        components: {Question},
        methods: {
            getDotClass(n) {
                if (n <= this.$route.params.id) {
                    return "point answered"
                } else {
                    return "point"
                }
            },
            goBack() {
                if (this.$route.params.id > 0) {
                    const previousQuestion = parseInt(this.$route.params.id) - 1
                    this.$router.push("/questionnaire/" + previousQuestion)
                }
            }
        },
    }
</script>

<style scoped>
    /* set the applications app to 600 when viewed on desktop (width more than 906) */
    @media screen and (min-width: 906px) {
        .questionnaire {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    /* adjust the status bar for very thin devices (for example iPhone 5) */
    @media screen and (max-width: 330px) {
        .progress {
            margin-top: 0.5em;
        }

        .point {
            width: 0.35em;
            height: 0.35em;
        }
        
        #back-button {
            width: 2em;
        }
    }

    /* regular status bar for devices wider than 330px */
    @media screen and (min-width: 330px) {
        .progress {
            margin-top: 0.7em;
        }

        .point {
            width: 0.5em;
            height: 0.5em;
        }

        #back-button {
            width: 2.5em;
        }
    }

    #back-button {
        position: absolute;
        margin-left: 2%;
        float: left;

    }

    #status-bar-wrapper {
        display: block;
        flex-direction: row;
        /* if this transparent border gets removed, the progress bar isn't centered anymore */
        border: 1px solid transparent;
    }

    .progress {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .point {
        margin: 0.2em;
        border-radius: 50%;
        background: transparent;
        border: 2px solid #23286b;
        user-select: none;
    }
    
    .point.answered {
        background-color: #23286b;
    }
</style>
