var ShellMenu = function () {

    let _self = this;
    let _modules = null;
    let _cModule = 1;
    let _cPage = 1;
    let _cPageIndex = 0;

    let _parentIndex = 18;
    let _close_btn = null;
    let _isLinear = false;
    let _shell_wrapper = null;
    let _menu_wrapper = null;
    let _menu_list = null;
    let _btn_gear = null;

    let _currentPage = null;
    let _totalPages = null;

    this.init = function (modules) {

        Utils.clear();

        //   console.log('ShellMenu:   init');
        _isLinear = modules['isLinear'] || _isLinear;

        _modules = modules['modules'];

        _cModule = modules['cMNo'];
        _cPage = modules['cPNo'];

        _menu_wrapper = $("#menu_popup")
        _shell_wrapper = $("#shell_wrapper")
        _btn_close = $(".menuListwrapper .close-anim");

        _menu_list = $("#menu_list");
        _menu_list.addClass("menu_list scrollbar-2");
        _menu_list.empty();
        _btn_gear = $("#btn_gear")

        _parentIndex = parseInt(_menu_list.attr('tabindex')) + 1 || _parentIndex;

        _currentPage = $("#currentPage");
        _totalPages = $("#totalPages");

        createModuleTile(_modules);

        let _data = {
            'mNo': _cModule,
            'pNo': _cPage
        }
        _self.updateMenuStatus(_data);

    }


    var createModuleTile = function (modules) {
        $.each(modules, function (idx, model) {
            updateTile(idx, model)
        });
        addEventOnClose();
    }


    let selectMenuTile = function (tile) {

        let _tile = $(tile);

        let _mTiles = _menu_list.find('.mTile')
        _mTiles.removeClass('open');

        if (_tile.hasClass('active')) {
            var _tileObj = {
                id: _tile.attr('id'),
                mNo: parseInt(_tile.attr('data-mNo')),
                title: _tile.attr('alt')
            }
            _tile.toggleClass('open');

            if (_tile.hasClass('open')) {
                _tile.attr('aria-expanded', 'true');
            } else {
                _tile.attr('aria-expanded', 'false');
            }
        }

        try {
            _menu_wrapper.find(".tooltip_box").hide();
        } catch (err) {
            Utils.error(err)
        }
    }

    let updateTile = function (idx, model) {

        try {

            let mNo = (idx + 1);
            let _mTileDetails = {
                _name: 'mTile',
                _mNo: mNo,
                _model: model,
                _isToolTip: false,
                _isClickEvent: true,
            }
            updateModuleTile(_mTileDetails)

        } catch (err) {
            Utils.error(err);
        }

    }

    let updateModuleTile = function (mData) {

        let _mNo = mData['_mNo'];
        let _model = mData['_model'];
        let _name = mData['_name'];
        let _title = _model['title'];
        let _icon = _model['icon'] || 'menu_module_icon';
        let _pages = _model['pages'];

        let _mLi = '<li id="mTile_' + _mNo + '" aria-controls="tree_pageList_' + _mNo + '" class="mTile mTile-sm mTile_' + _mNo + ' menu_icon ' + _icon + '  hvr-shutter-in-vertical">' + _title + '</li>';

        _menu_list.append(_mLi);


        let _mTile = $("#" + _name + "_" + _mNo);
        _mTile.off("click");

        _mTile.empty();

        _mTile.removeClass('cMTile');

        _mTile.removeClass('disable');
        _mTile.removeClass('active');

        _mTile.append("<h4>" + _title + "</h4>");

        let _pUl = $('<ul id="tree_pageList_' + _mNo + '" class = "tree_page_list"></ul>');
        _pUl.off("click")

        $.each(_pages, function (idx, page) {

            if(page['showInMenu'] =="mDisabled"){

            }else{
                _cPageIndex++;
            }

           

            var _pNo = parseInt(idx + 1);
            var _isDisplay = page["isDisplay"] || "true";
            var _isDisplayClass = (_isDisplay.toLowerCase() == "false") ? "tileHide" : "tileShow";


            /*  var _isStep = page["isStep"] || "false";
            var _stepSpan = ""
            if (_isStep.toLowerCase() == "true") {
                _display_stepNo++
                _stepSpan = '<span>' + _display_stepNo + '</span>'
            }
        */

            //  var _isActive = page["isActive"] || "false";
            // var _pClass = (_isActive.toLowerCase() == "true") ? "active" : "disabled";

            var _pClass = (_isLinear) ? "disabled" : "active";
            _pClass = ((_mNo == 1) && (_pNo == 1)) ? "active" : _pClass;

            _pClass = _pClass + ' ' + _isDisplayClass
            // console.log("page:    " + _pNo + ": " + page);
            let _showInMenu = page['showInMenu']
            let _title = page['title']
            let _icon = page['icon'] || 'menu_page_icon'

            
            let _pLi = $('<li role="button" id="tree_pTile_' + _mNo + '_' + _pNo + '" class= "tree_pTile tree_pTile-sm tree_pTile_' + _mNo + '_' + _pNo + ' menu_icon ' + _icon + ' hvr-shutter-in-vertical ' + _pClass + ' ' + _showInMenu + '" data-tree_pTile=' + page["pageData"] + ' data-pTileNo=' + _cPageIndex + '>' + _title + '</li>');

            _pLi.off("click").on("click", function (e) {

                let _item = $(this);

                if (_item.hasClass('active') && (!_item.hasClass('cPTile'))) {

                    let _pageRef = _item.attr("data-tree_pTile");
                    let _idstr = _item.attr('id').split("_");

                    let _mNo = parseInt(_idstr[2]) || 1
                    _cPage = parseInt(_idstr[3]) || 1

                    let _data = {
                        'mNo': _cModule,
                        'pNo': _cPage
                    }

                    if (_cModule != _mNo) {
                        _cModule = _mNo;
                        _data['mNo'] = _cModule;
                        _shell_wrapper.trigger("loadModule", _data)

                    } else {
                        // $("#pTile_"+_cModule+"_"+_cPage).trigger("click");
                        _btn_gear.trigger("click");
                        _shell_wrapper.trigger('jumpToPage', _pageRef)
                    }

                    _self.updateMenuStatus(_data)
                }
            })
            _pUl.append(_pLi)
        })

        _mTile.append(_pUl)

        // console.log("ShellMenu:   updateTile:    " + _mNo + "    ::  " + _title)

        _mTile.attr({
            'alt': _title,
            'data-mNo': _mNo,
        });

        // let _class = (_model['isActive'] == "true") ? "active" : "disable";

        let _class = (_isLinear) ? "disabled" : "active";
        //  _class = (_mNo == 1) ? "active" : _class;

        _mTile.addClass(_class);

        addClickEventOnMLi(_mTile);

        if (_class == 'active') {
            /* _mTile.children().each(function() {
                 $(this).children().each(function() {
                     addTabIndex($(this), _title)
                 })
             })
             */
        }
    }

    this.updateMenuStatus = function (data) {

        _cModule = data['mNo'] || 1
        _cPage = data['pNo'] || 1

        $(".tree_pTile").removeClass('cPTile');
        $("#menu_list .mTile").removeClass('cMTile').removeClass("open");

        let _mTile = $("#menu_list .mTile_" + _cModule)
        _mTile.addClass('active cMTile').addClass("open").removeClass("disabled");

        let _pTile = $('#tree_pTile_' + _cModule + '_' + _cPage)
        _pTile.addClass("cPTile");

        updatePageCount(_pTile);

    }



    let updatePageCount = function (cPTile) {
        
        try {
            let _cPNo = parseInt(cPTile.attr('data-pTileNo'));
            _currentPage.text(Utils.addZero(_cPNo));

            _user_details['cPNo'] = _cPNo;

            let _tPNo = _user_details['tPNo'];
            _totalPages.text("/" + Utils.addZero(_tPNo));

        } catch (err) {

        }

    }

    let addEventOnClose = function () {
        _btn_close.off("click").on("click", function () {
            _shell_wrapper.trigger("closePopup");
            _btn_gear.trigger("click");
            _shell_wrapper.trigger("play");
        })
    }
    let addClickEventOnMLi = function (tile) {
        tile.each(function () {
            $(this).attr('aria-expanded', 'false');
        })

        tile.off("click").on("click", function (e) {
            e.stopPropagation();
            let _tile = $(this);
            if (_tile.hasClass('disable')) {
                return;
            } else {
                selectMenuTile(_tile)
            }
        })
    }

    this.addTabIndex = function () {
        Utils.removeTabIndex()
        let _tabElements = {
            'elements': [{
                'selector': "#menuListIcon"
            },
            {
                'selector': "#menu_list .mTile "
            },
            {
                'selector': "#menu_list .tree_pTile "
            },
            {
                'selector': "#menu_list"
            }
            ],
            'sIndex': _parentIndex
        };
        _shell_wrapper.trigger("addTabIndexing", _tabElements);

    }

    return this;
};