Aquarius.component.define('Frontend/Tabs', function ($element, options) {

    var defaults = {};
    var classTabsNav = 'tabs__nav';
    var classTabsNavItem = 'tabs__nav-item';

    var classTabsCurrent = 'tabs__tab--current';
    var classTabsNavItemActive = 'tabs__nav-item--active';

    var $tabsEl = $('.jstabs');

    function Frontend() {
    }

    Frontend.prototype = {
        init: function () {
            var self = this;

            this.$element = $element;
            this.bindEvents();
            if (!$tabsEl.hasClass('noprevent')) {
                this.setDefault();
            }
        },
        handleChange :function(event) {
            var tabId = this.href.split('#')[1];
            var color = this.dataset.color;
            var text = this.textContent;

            var $this = $(this);
            var $tab = $('#' + tabId);

            $this.closest('.' + classTabsNav)
                .find('.' + classTabsNavItem)
                .removeClass(classTabsNavItemActive);

            $this
                .parent()
                .addClass(classTabsNavItemActive);

            $('.tabs__text').text(text);

            $tab
                .closest('.tabs__content')
                .find('.tabs__tab')
                .removeClass(classTabsCurrent);

            $tab.addClass(classTabsCurrent);

            if (color) {
                var $colorTab = $(this).closest('.colorTab');
                $colorTab.css('background-color', color);
                $colorTab.next('.wave').css('fill', color);
            }

            event.preventDefault();
        },
        handleSelectChange : function() {
            var id = $('.tabs__select').find('option:selected').val();
            console.log(id);
            var link = $('.tabs__select').closest('.jstabs').find('a[href="' + id + '"]');
            console.log(link);
            link.trigger('click');
        },
        bindEvents : function() {
            var link = $tabsEl.find('.' + classTabsNav).find('a');

            if ($tabsEl.hasClass('noprevent')) {
                link.on('click', function () { console.log(this.href); window.location = this.href});
            }
            else {
                link.on('click', this.handleChange);
            }


            $tabsEl
                .find('.tabs__select')
                .on('change', this.handleSelectChange);
        },
        setDefault : function() {
            var $first = $tabsEl.find('.' + classTabsNavItem).first();
            var $link = $first.find('a');
            var text = $first.text();
            var color = $link.data('color');

            if (color) {
                this.changeColor($link, color);
            }

            $first.addClass(classTabsNavItemActive);

            $tabsEl.find('.tabs__tab').first().addClass(classTabsCurrent);

            $('.tabs__text').text(text);
        },
        changeColor : function(element, color) {
            var $colorTab = $(element).closest('.colorTab');
            $colorTab.css('background-color', color);
            $colorTab.next('.wave').css('fill', color);
        }
    };

    return Frontend;
});