define([
    '../../core/utils/data',
    '../../core/utils/helper',
    '../../core/utils/method',
    '../../core/models/index'
], (data, helper, method, model) => {
    (function ($) {
        new method('tab, step', {
            init: function (element) {
                const context = this;

                const options = context.local._options;
                const $container = element.next();
                const id = context.local._id;
                let index = (typeof options.active !== 'undefined' && options.active !== null)? (options.active - 1) : 0;
                let length = 0;

                length = element.find('.' + id + '-item').length;

                element.addClass(id);

                if ($container.length > 0 && $container.hasClass(id + '-container')) {
                    element.unbind(id + '.next').bind(id + '.next', function () {
                        if (_index + 1 <= length) {
                            context.$helper.triggerHandler(element.find('.' + id + '-item').eq(index + 1), 'click');
                        }
                        else {
                            return false;
                        }
                    });

                    element.unbind(id + '.prev').bind(id + '.prev', function () {
                        if (_index - 1 >= 0) {
                            context.$helper.triggerHandler(element.find('.' + id + '-item').eq(index - 1), 'click');
                        }
                        else {
                            return false;
                        }
                    });

                    element.unbind(id + '.move').bind(id + '.move', function (event, index) {
                        context.$helper.triggerHandler(element.find('.' + id + '-item').eq(index), 'click');
                    });

                    context.$helper.bind(element.find('.' + id + '-item'), 'click', function (event) {
                        event.preventDefault();
                        const $this = $(this);
                        index = $this.index();
                        $this.addClass('active').siblings('.active').removeClass('active');
                        $container.find('.' + id + '-container-item').eq(index).addClass('active').siblings('.active').removeClass('active');

                        element.triggerHandler(id + '.move', {
                            index: index,
                            length: length,
                            header: element.find('.' + id + '-item')
                        });
                    });

                    context.$helper.triggerHandler(element.find('.' + id + '-item').eq(index), 'click');
                }
                else {
                    context.$helper.log('Set <div class="' + id + '-container"></div> elements after <' + id + '> element for enable ' + id + ' component.');
                }
            },
            options: {
                once: true,
                active: 1
            }
        });
    }(jQuery));
});