<template>
    <div id="progress-bar-container">
        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
    </div>
</template>

<script>
import store from "@/store";
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";

export default {
    name: "progressBar",
    data() {
        return {
            progress: this.getProgress(),
        };
    },
    methods: {
        getProgress() {
            var pageName = store.getters.applicationUser.lastPageVisited;
            return getProgressBarPercentage(pageName);
        },
    },
};
</script>
<style lang="scss">
#progress-bar-container {
    padding: 0.75rem 0;
    width: 100%;

    progress {
        height: 10px;
        width: 100%;

        /* Firefox */
        appearance: none;
        background-color: $blue-100;
        border: 0;
        border-radius: $border-radius-pill;
        box-shadow: $box-shadow-inset;

        &::-moz-progress-bar {
            background-color: $blue;
            border-radius: $border-radius-pill;
        }

        /* Webkit */
        -webkit-appearance: none;
        &::-webkit-progress-bar {
            background-color: $blue-100;
            border-radius: $border-radius-pill;
            box-shadow: $box-shadow-inset;
        }
        &::-webkit-progress-value {
            background-color: $blue;
            border-radius: $border-radius-pill;
        }
    }
}
</style>
