/*
	Author: Jeremy Espinosa
	Filename: colorPicker.js
	Description: Toggling the class of the color picker
	Dependencies: 
	How to use: 
		1. Just add js-colorpicker class to the parent component
*/

;(function($) {
    'use strict'

    B2C.colorPicker = {
        init: function(option) {
            this._default = {
                target: '.js-colorpicker',
                targetMobile: '.js-colorpicker-mobile',
                targetMobileDropdown: '.colorpicker-mobile__dropdown',
                activeClass: 'active',
                childElement: 'li'
            }

            this._option = $.extend({}, this._default, option)

            if (!$(this._option.target).length) return
            this.domCache()
            this.eventHandler()
        },

        domCache: function() {
            this.$jsColorpicker = $(this._option.target)
            this.$jsColorpickerMobile = $(this._option.targetMobile)
        },

        eventHandler: function() {
            let self = this

            this.$jsColorpicker.on(
                'click',
                self._option.childElement,
                function() {
                    self.toggleClass(self, this)
                }
            )

            this.$jsColorpickerMobile.on('click', function() {
                $(this)
                    .find(self._option.targetMobileDropdown)
                    .toggleClass(self._option.activeClass)
            })
        },

        toggleClass: function(self, element) {
            let $element = $(element)

            // add class to the current element and remove to all siblings
            $element
                .addClass(self._option.activeClass)
                .siblings()
                .removeClass(self._option.activeClass)
        }
    }

    B2C.colorPicker.init()
})(jQuery)
