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 = options.active? (Number(options.active)) : 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', () => {
                        if (index + 1 <= length - 1) {
                            index += 1;
                            context.$helper.triggerHandler(element.find('.' + id + '-item').eq(index), 'click');
                        }
                        else {
                            return false;
                        }
                    });

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

                    element.unbind(id + '.set').bind(id + '.set', (event, _index) => {
                        if (typeof _index !== 'undefined') {
                            index = Math.max(0, Number(_index) % length);
                            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: 0
            }
        });
    }(jQuery));
});