<template>
    <div class="barLoader">
        <div class="bars">
            <div :class="classGrey"></div>
            <div :class="classPink"></div>
            <div :class="classGreen"></div>
            <div :class="classPurple"></div>
            <div :class="classGrey"></div>
            <div :class="classGrey"></div>
            <div :class="classRed"></div>
            <div :class="classYellow"></div>
            <div :class="classBlue"></div>
            <div :class="classGrey"></div>
        </div>
        <div :class="color == 'white' ? 'loadText neg' : 'loadText'"><slot></slot></div>
    </div>
</template>

<script>
    /**
    * Inline audio bar type loader animation component
    */
    export default {
        name: 'BarLoader',
        props: {
            // Allowed types color, black, white
            color: {
                type: String,
                default: 'color'
            }
        },
        computed: {
            mono () {
                return ['black', 'white'].includes(this.color)
            },
            classGrey () {
                return `bar ${this.mono ? this.color : 'grey'}`
            },
            classPink () {
                return `bar ${this.mono ? this.color : 'pink'}`
            },
            classGreen () {
                return `bar ${this.mono ? this.color : 'green'}`
            },
            classPurple () {
                return `bar ${this.mono ? this.color : 'purple'}`
            },
            classRed () {
                return `bar ${this.mono ? this.color : 'red'}`
            },
            classYellow () {
                return `bar ${this.mono ? this.color : 'yellow'}`
            },
            classBlue () {
                return `bar ${this.mono ? this.color : 'blue'}`
            }
        }
    }
</script>
