/*
	Author: Gab Nucum
	Filename: tab.js
	Description: Make tabs into a dropdown on mobile view.
	Dependencies:
		- jQuery
	How to use:
		1. The element must have a 'js-tab-dropdown' class.
	Sample HTML:
		<ul class="nav tab-dropdown__menu js-tab-dropdown" role="tablist">
			<li class="active"><a href="#_" role="tab" data-toggle="tab" class="active">Please Select</a></li>
			<li><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
			<li><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
			<li><a href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
		</ul>
*/

;(function($) {
    'use strict'

    B2C.tab = {
        init: function(option) {
            this._default = {
                target: '.js-tab-dropdown',
                list: '.js-tab-dropdown-list',
                heading: '.js-tab-dropdown-heading'
            }

            this._option = $.extend(true, this._default, option)

            if (!$(this._option.target).length) return

            this.eventHandler()
        },

        eventHandler: function() {
            let self = this

            $(self._option.target).on('click', function() {
                $(this)
                    .find(self._option.list)
                    .toggleClass('active')
            })

            $(`${self._option.list} li`).on('click', function() {
                $(this)
                    .parents(self._option.target)
                    .find(self._option.heading)
                    .text($(this).text())
                $(this)
                    .parents(self._option.target)
                    .find(self._option.list)
                    .removeClass('.active')
            })
        }
    }

    const defaultTab = Object.create(B2C.tab)

    defaultTab.init()
})(jQuery)
