<!-- webview only -->
<template>
    <section class="bl___progress-container" @click.capture="$emit('click', $event)" @touchstart.capture="$emit('touchstart', $event)" @touchmove.capture="$emit('touchmove', $event)" @touchend.capture="$emit('touchend', $event)" @touchcancel.capture="$emit('touchcancel', $event)">
        <section class="progress-container" :style="{'height': `${strokeWidth}px`, 'background': backgroundColor}">
            <section class="progress-bar" :style="{'height': `${strokeWidth}px`, 'background': activeColor || color, 'width': `${barPercent}%`}"></section>
        </section>
        <p class="progress-text" v-show="showInfo">{{actualPercent}}%</p>
    </section>
</template>

<script>
export default {
    name: 'BProgress',
    props: {
        percent: {
            type: [Number, String],
            default: 0
        },
        showInfo: {
            type: Boolean,
            default: false
        },
        strokeWidth: {
            type: [Number, String],
            default: 6,
        },
        color: {
            type: String,
            default: '#09BB07'
        },
        activeColor: {
            type: String,
            default: ''
        },
        backgroundColor: {
            type: String,
            default: '#eeeeee'
        },
        active: {
            type: Boolean,
            default: false,
        },
        activeMode: {
            type: String,
            default: 'backwards',
        }
    },
    data() {
        return {
            barPercent: 0,
            running: false,
        }
    },
    computed: {
        actualPercent() {
            return isNaN(this.percent) ? 0 : Math.max(0, Math.min(100, this.percent));
        },
    },
    watch: {
        percent(value) {
            if (this.active && !this.running) {
                switch (this.activeMode) {
                    case 'forwards': {
                        break;
                    }
                    default: {
                        this.barPercent = 0;
                    }
                }
                this.update();
            } else {
                this.barPercent = this.percent;
            }
        }
    },
    created() {
        this.update.bind(this);
    },
    mounted() {
        if (this.active) {
            this.update();
        } else {
            this.barPercent = this.percent;
        }
    },
    methods: {
        update() {
            this.running = true;

            if (this.barPercent >= this.percent) {
                this.running = false;
                this.barPercent = this.percent;
                return;
            }

            this.barPercent += 0.5;

            requestAnimationFrame(this.update);
        }
    }
}
</script>

<style lang="less" scoped>
.bl___progress-container {
    display: flex;
    flex-direction: row;
    align-items: center;

    .progress-container {
        flex: 1 1 0%;
    }

    .progress-text {
        flex: 0 0 auto;
        font-size: 14px;
        line-height: 14px;
        margin-left: 10px;
    }
}
</style>
