(function (paw) {
    function MobileMenuSettingsComponent($table, settings) {
        var self = this;
        this.$table = $table;
        this.$tableBody = null;
        this.settings = settings;

        this.itemsCache = {};
        this.originValues = {};

        this.onItemChecked = function () {
            var $elt = $(this);
            var itemId = $elt.attr('data-mms-input-id');
            var item = self.getItem(itemId);
            item.isChecked = $elt.prop('checked');
        };
        this.onDismissModal = function () {
            self.revertValues();
            self.preloader(false);
        };
    }

    MobileMenuSettingsComponent.prototype.init = function () {
        if (paw.utils.value.notSet(this.settings)) {
            console.error("Mobile menu settings component: missing settings!");
            return;
        }
        this.preloader(false);
        this.$tableBody = this.$table.children('tbody');
        this.linkItems();
        this.$tableBody.find('tr input[type=checkbox][data-mms-input-id]').on('change', this.onItemChecked);

        if (paw.utils.value.isSet(this.settings.modalSelector)) {
            $(this.settings.modalSelector).on('hidden.bs.modal', this.onDismissModal);
        }
    };

    MobileMenuSettingsComponent.prototype.destroy = function () {
        this.$tableBody.find('tr input[type=checkbox][data-mms-input-id]').off('change', this.onItemChecked);
        if (paw.utils.value.isSet(this.settings.modalSelector)) {
            $(this.settings.modalSelector).off('hidden.bs.modal', this.onDismissModal);
        }
    };

    MobileMenuSettingsComponent.prototype.revertValues = function () {
        for (var k in this.originValues) {
            var originValue = this.originValues[k];
            var item = this.itemsCache[k];
            if (!paw.utils.value.isSet(item)) {
                continue;
            }
            if (item.isChecked !== originValue) {
                this.$setItemChecked(item, originValue);
            }
        }
    };

    

    MobileMenuSettingsComponent.prototype.linkItems = function () {
        var self = this;
        $(this.settings.mainMenuSelector).find(this.settings.mainMenuItemSelector).each(function () {
            self.linkItem($(this));
        });
    };

    MobileMenuSettingsComponent.prototype.linkItem = function ($elt) {
        var $icon = $elt.children('i');
        var iconClass = null;
        var label = null;
        var dataId = $elt.parent().attr('data-list-item-id');

        if ($icon.length > 0) {
            iconClass = $icon.attr('class');
        }
        var $span = $elt.children('span');
        label = $span.length > 0 ? $span.text() : $elt.text();

        if (paw.utils.value.isSet(label)) {
            label = paw.utils.value.trimString(label);
        }

        if (paw.utils.value.isSet(dataId)) {
            dataId = paw.utils.value.trimString(dataId);
        }
        else {
            if (paw.utils.value.notSet(label)) {
                console.warn("Mobile menu settings: can't determine ID for menu item " + label + ", menu item can't be linked with settings!");
                return;
            }
            console.warn("Mobile menu settings: can't determine ID for menu item " + label + ", label will be used as ID.");
            dataId = label;
        }

        var item = {
            itemId: dataId,
            label: label,
            iconClass: iconClass,
            isChecked: true
        };
        this.itemsCache[item.itemId] = item;
        this.originValues[item.itemId] = this.itemsCache[item.itemId];
        this.renderItem(item);
        
    };

    MobileMenuSettingsComponent.prototype.renderItem = function (item) {
        var $tr = $('<tr data-id="' + item.itemId + '"></tr>');
        $tr.append('<td class="entry-type-table-padding adjusted-modal-dialog-td"><i class="' + item.iconClass + '"></i></td>');
        $tr.append('<td style="width:60%" class="entry-type-table-padding"><span>' + item.label + '</span></td>');
        $tr.append('<td class="adjusted-modal-dialog-td"><input class="menu-item-checkbox" type="checkbox" ' + (item.isChecked? 'checked' : '') + ' data-mms-input-id="' + item.itemId + '" /></td>');
        this.$tableBody.append($tr);
    };

    MobileMenuSettingsComponent.prototype.getItem = function (itemId) {
        return this.itemsCache[itemId];
    };

    MobileMenuSettingsComponent.prototype.setItemEnabled = function (itemId, value) {
        if (paw.utils.value.notSet(itemId)) {
            return;
        }
        var item = this.getItem(itemId);
        this.$setItemChecked(item, value);
        this.originValues[itemId] = value;
    };

    MobileMenuSettingsComponent.prototype.$setItemChecked = function (item, value) {
        if (!paw.utils.value.isSet(item)) {
            return;
        }
        item.isChecked = value;
        this.$tableBody.find(' input[type="checkbox"][data-mms-input-id="' + item.itemId + '"]').prop('checked', item.isChecked);
    };

    MobileMenuSettingsComponent.prototype.preloader = function (isDisplay) {
        if (isDisplay) {
            $(this.settings.preloaderSelector).removeClass('hidden');
        }
        else {
            $(this.settings.preloaderSelector).addClass('hidden');
        }
    };

    paw.com.MobileMenuSettingsComponent = MobileMenuSettingsComponent;
})(paw);