define([
    'jquery',
    '/api/config',
    '/bower_components/chainpad-crypto/crypto.js',
    '/common/toolbar3.js',
    '/bower_components/nthen/index.js',
    '/common/sframe-common.js',
    '/common/hyperscript.js',
    '/customize/messages.js',
    '/common/common-interface.js',
    '/common/common-util.js',

    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
    'less!/notifications/app-notifications.less',
], function (
    $,
    ApiConfig,
    Crypto,
    Toolbar,
    nThen,
    SFCommon,
    h,
    Messages,
    UI,
    Util
    )
{
    var APP = {};

    var common;
    var sFrameChan;

    var categories = {
        'all': [
            'cp-notifications-all',
        ],
        'friends': [
            'cp-notifications-friends',
        ],
        'pads': [
            'cp-notifications-pads',
        ],
    };

    var create = {};

    // create the list of notifications
    // show only notifs with type in filterTypes array. If filterTypes empty, don't filter.
    var makeNotificationList = function (key, filterTypes) {
        filterTypes = filterTypes || [];
        var safeKey = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
        var categoryName = Messages['notification_cat_' + safeKey] || safeKey;

        var notifsData = [];
        var $div = $('<div>', {'class': 'cp-notifications-' + key + ' cp-sidebarlayout-element'});
        var notifsPanel;
        var notifsList;
        var dismissAll;
        notifsPanel = h("div.cp-app-notifications-panel", [
            h('div.cp-app-notifications-panel-titlebar', [
                h("span.cp-app-notifications-panel-title",
                    (Messages.notificationsPage || "Notifications") + " - " + categoryName),
                h("div.cp-app-notifications-panel-titlebar-buttons", [
                    dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.dismissAll || "Dismiss All" }, h("span.fa.fa-trash")),
                ]),
            ]),
            notifsList = h("div.cp-app-notifications-panel-list", [
                h("div.cp-notification.no-notifications", Messages.notifications_empty),
            ]),
        ]);
        $div.append(notifsPanel);

        common.mailbox.subscribe(["notifications"], {
            onMessage: function (data, el) {
                console.log(data);
                if (el) {
                    // if the type of notification correspond
                    if (filterTypes.length === 0 || filterTypes.indexOf(data.content.msg.type) !== -1) {
                        var dismissHandler = data.content.dismissHandler;
                        data.content.dismissHandler = function () {
                            $(el).addClass("dismissed");
                            dismissHandler();
                        };
                        notifsData.push(data);
                        $(notifsList).prepend(el);
                    }
                }
            },
            onViewed: function () {}
        });

        $(dismissAll).click(function () {
            notifsData.forEach(function (data) {
                if (data.content.isDismissible) {
                    data.content.dismissHandler();
                }
            });
        });

        return $div;
    };

    create['all'] = function () {
        var key = 'all';
        return makeNotificationList(key);
    };

    create['friends'] = function () {
        var key = 'friends';
        var filter = ["FRIEND_REQUEST", "FRIEND_REQUEST_ACCEPTED", "FRIEND_REQUEST_DECLINED"];
        return makeNotificationList(key, filter);
    };

    create['pads'] = function () {
        var key = 'pads';
        var filter = ["SHARE_PAD"];
        return makeNotificationList(key, filter);
    };


    var hideCategories = function () {
        APP.$rightside.find('> div').hide();
    };
    var showCategories = function (cat) {
        hideCategories();
        cat.forEach(function (c) {
            APP.$rightside.find('.'+c).show();
        });
    };
    var createLeftside = function () {
        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
                            .appendTo(APP.$leftside);
        var metadataMgr = common.getMetadataMgr();
        var privateData = metadataMgr.getPrivateData();
        var active = privateData.category || 'all';
        common.setHash(active);
        Object.keys(categories).forEach(function (key) {
            var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
            if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
            if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user'})); }
            if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }

            if (key === active) {
                $category.addClass('cp-leftside-active');
            }

            $category.click(function () {
                if (!Array.isArray(categories[key]) && categories[key].onClick) {
                    categories[key].onClick();
                    return;
                }
                active = key;
                common.setHash(key);
                $categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
                $category.addClass('cp-leftside-active');
                showCategories(categories[key]);
            });

            $category.append(Messages['notification_cat_'+key] || key);
        });
        showCategories(categories[active]);
    };

    var createToolbar = function () {
        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
        var configTb = {
            displayed: displayed,
            sfCommon: common,
            $container: APP.$toolbar,
            pageTitle: Messages.notificationsPage || 'Notifications',
            metadataMgr: common.getMetadataMgr(),
        };
        APP.toolbar = Toolbar.create(configTb);
        APP.toolbar.$rightside.hide();
    };

    nThen(function (waitFor) {
        $(waitFor(UI.addLoadingScreen));
        SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
    }).nThen(function (waitFor) {
        APP.$container = $('#cp-sidebarlayout-container');
        APP.$toolbar = $('#cp-toolbar');
        APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
        APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
        sFrameChan = common.getSframeChannel();
        sFrameChan.onReady(waitFor());
    }).nThen(function (/*waitFor*/) {
        createToolbar();
        common.setTabTitle(Messages.notificationsPage || 'Notifications');


        // Content
        var $rightside = APP.$rightside;
        var addItem = function (cssClass) {
            var item = cssClass.slice(17); // remove 'cp-notifications-'
            if (typeof (create[item]) === "function") {
                $rightside.append(create[item]());
            }
        };
        for (var cat in categories) {
            if (!Array.isArray(categories[cat])) { continue; }
            categories[cat].forEach(addItem);
        }

        createLeftside();

        UI.removeLoadingScreen();

    });
});