/*
	Author: Adrian Arellano
	Filename: progressBar.js
    Description: This changes the color of the progress bar depending on the data attribute value
    Dependency: 
    How to use:
*/

;(function($){
    B2C.progressBar = {
        init: function(option) {
            this._default = {
                target: `.js-progressbar__container`,
                colorChange: '.js-meter-color_change',
                barClass: '.bar',
                barRed: 'bar--red',
                barOrange: 'bar--orange',
                barGreen: 'bar--green'
            }

            B2C.progressBar._option = $.extend(this._default, option)

            if(!$(B2C.progressBar._option.target).length) return

            this.mapping()              
        },

        mapping: function() {
            let self = B2C.progressBar

            $(this._option.target).map(function() {
                let target = $(this),
                    progress = target.data(`progress`)

                target.find(self._option.barClass).css(`width`, `${progress}%`)

                if(target.find('.js-meter-color_change').length) {
                    self.checker(progress, target)
                }
            })
        },
        
        checker: function(progress, target) {            
           if(progress < 20) {
                target.find(this._option.barClass).addClass(this._option.barRed)
            } else if (progress >= 80) {
                target.find(this._option.barClass).addClass(this._option.barGreen)
            } else if ((progress >= 20) || (progress < 80 )) {
                target.find(this._option.barClass).addClass(this._option.barOrange)
            }
        }
    }

    B2C.progressBar.init()
})(jQuery)