<template>
  <div class="scan-progress">
    <span style="right: 46.5%;">{{ title }}</span>
    <div :style="deriveScanProgressStyle(percentage)" />
  </div>
</template>

<script>
export default {
    name: 'ScanProgress',
    props: {
        percentage: {
            type: Number,
            required: true
        },
        title: {
            type: String,
            required: true
        }
    },
    methods: {
        /**
         * Derives the style to reflect the provided percentage. Also
         * calculates the appropriate hex color.
         *
         * Reference: https://gist.github.com/mlocati/7210513
         **/
        deriveScanProgressStyle(perc) {
            let r, g, b = 0;
            if (perc < 50) {
                r = 255;
                g = Math.round(5.1 * perc);
            } else {
                g = 255;
                r = Math.round(510 - 5.10 * perc)
            }
            let h = r * 0x10000 + g * 0x100 + b * 0x1;
            let hexColor = '#' + ('000000' + h.toString(16)).slice(-6);

            return {
                "width": perc + "%",
                "backgroundColor": hexColor,
            }
        },
    }
}
</script>

<style scoped>
.scan-progress {
    border: 1px solid black;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
}

.scan-progress span {
    position: absolute;
    font-size: .75em;
    right: 48%;
    font-weight: 900;
    top: -2px;
    color: black;
}

.scan-progress div {
    height: 12px;
    transition: 1s;
    background-color: green;
    text-align: center;
    font-size: .6em;
    width: 0%;
}
</style>
