Ext.define('PMG.QuarantineNavigationTree', {
    extend: 'Ext.list.Tree',
    xtype: 'quarantinenavigationtree',

    select: function (path) {
        let me = this;
        let item = me.getStore().findRecord('path', path, 0, false, true, true);
        me.setSelection(item);
    },

    store: {
        root: {
            expanded: true,
            children: [
                {
                    text: gettext('Spam Quarantine'),
                    iconCls: 'fa fa-cubes',
                    path: 'pmgSpamQuarantine',
                    expanded: true,
                    children: [
                        {
                            text: gettext('Welcomelist'),
                            iconCls: 'fa fa-file-o',
                            path: 'pmgUserWelcomelist',
                            leaf: true,
                        },
                        {
                            text: gettext('Blocklist'),
                            iconCls: 'fa fa-file',
                            path: 'pmgUserBlocklist',
                            leaf: true,
                        },
                    ],
                },
                {
                    text: gettext('Help'),
                    iconCls: 'fa fa-support',
                    path: 'pmgQuarantineAbout',
                    leaf: true,
                    expanded: true,
                },
            ],
        },
    },

    animation: false,
    expanderOnly: true,
    expanderFirst: false,
    ui: 'pve-nav',
});

Ext.define('PMG.QuarantineView', {
    extend: 'Ext.container.Container',
    xtype: 'quarantineview',

    title: 'Proxmox Mail Gateway Quarantine',

    controller: {
        xclass: 'Ext.app.ViewController',
        routes: {
            ':path:subpath': {
                action: 'changePath',
                before: 'beforeChangePath',
                conditions: {
                    ':path': '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
                    ':subpath': '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?',
                },
            },
        },

        beforeChangePath: function (path, subpathOrAction, action) {
            let me = this;

            let subpath = subpathOrAction;
            if (!action) {
                action = subpathOrAction;
                subpath = undefined;
            }

            if (!Ext.ClassManager.getByAlias('widget.' + path)) {
                console.warn('xtype "' + path + '" not found');
                action.stop();
                return;
            }

            let lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
            if (lastpanel && lastpanel.xtype === path) {
                // we have the right component already,
                // we just need to select the correct tab
                // default to the first
                subpath = subpath || 0;
                if (lastpanel.getActiveTab) {
                    // we assume lastpanel is a tabpanel
                    if (lastpanel.getActiveTab().getItemId() !== subpath) {
                        // set the active tab
                        lastpanel.setActiveTab(subpath);
                    }
                    // else we are already there
                }
                action.stop();
                return;
            }

            action.resume();
        },

        changePath: function (path, subpath) {
            let me = this;
            let contentpanel = me.lookupReference('contentpanel');
            let lastpanel = contentpanel.getLayout().getActiveItem();

            let obj = contentpanel.add({ xtype: path, cselect: subpath });
            let treelist = me.lookupReference('navtree');

            treelist.suspendEvents();
            treelist.select(path);
            treelist.resumeEvents();

            if (Ext.isFunction(obj.setActiveTab)) {
                obj.setActiveTab(subpath || 0);
                obj.addListener('tabchange', function (tabpanel, newc, oldc) {
                    let newpath = path;

                    // only add the subpath part for the
                    // non-default tabs
                    if (tabpanel.items.findIndex('id', newc.id) !== 0) {
                        newpath += ':' + newc.getItemId();
                    }

                    me.redirectTo(newpath);
                });
            }

            contentpanel.setActiveItem(obj);

            if (lastpanel) {
                contentpanel.remove(lastpanel, { destroy: true });
            }
        },

        logout: function () {
            PMG.app.logout();
        },

        changeLanguage: function () {
            Ext.create('Proxmox.window.LanguageEditWindow', {
                cookieName: 'PMGLangCookie',
            }).show();
        },

        changeTheme: () =>
            Ext.create('Proxmox.window.ThemeEditWindow', {
                cookieName: 'PMGThemeCookie',
                autoShow: true,
            }),
        navigate: function (treelist, item) {
            this.redirectTo(item.get('path'));
        },

        execQuarantineAction: function (qa) {
            PMG.Utils.doQuarantineAction(qa.action, qa.cselect);
        },

        switchToMobile: function () {
            let params = new URLSearchParams(document.location.search);
            params.set('mobile', '1');
            document.location.search = params.toString();
        },

        control: {
            '[reference=logoutButton]': {
                click: 'logout',
            },
            '[reference=languageButton]': {
                click: 'changeLanguage',
            },
            '[reference=themeButton]': {
                click: 'changeTheme',
            },
            '[reference=mobileButton]': {
                click: 'switchToMobile',
            },
        },

        listen: {
            global: {
                unmatchedroute: 'onUnmatchedRoute',
            },
        },

        onUnmatchedRoute: function (token) {
            console.warn(
                `got unmatched app route token ${token}, redirecting to quarantine overview.`,
            );
            this.redirectTo('pmgSpamQuarantine');
        },

        init: function (view) {
            let me = this;

            // load username
            let username = Proxmox.UserName.replace(/@quarantine$/, '');
            me.lookupReference('usernameinfo').setText(username);

            // show login on requestexception
            // fixme: what about other errors
            Ext.Ajax.on('requestexception', function (conn, response, options) {
                if (response.status === 401) {
                    // auth failure
                    me.logout();
                }
            });

            let qa = PMG.Utils.extractQuarantineAction();
            let token;
            if (qa) {
                token = 'pmgSpamQuarantine';
                if (qa.action === 'blocklist') {
                    token = 'pmgUserBlocklist';
                }
                if (qa.action === 'welcomelist') {
                    token = 'pmgUserWelcomelist';
                }
                if (qa.cselect) {
                    token += ':' + qa.cselect;
                }
                this.redirectTo(token, true);
                if (qa.action) {
                    me.execQuarantineAction(qa);
                }
            } else {
                // select treeitem and load page from url fragment

                token = Ext.util.History.getToken() || 'pmgSpamQuarantine';
                this.redirectTo(token, true);
            }

            if (Ext.getBody().getViewSize().width <= 1100) {
                Ext.toast({
                    title: gettext('Narrow viewport detected'),
                    items: {
                        xtype: 'button',
                        iconCls: ' x-btn-icon-el-default-toolbar-small fa fa-mobile',
                        cls: 'x-btn-default-toolbar-small proxmox-inline-button',
                        text: gettext('Switch to mobile view'),
                        href: '?mobile=1',
                        hrefTarget: '_self',
                    },
                    minWidth: 250,
                    closable: true,
                    autoCloseDelay: 7000,
                    iconCls: 'fa fa-question-circle',
                    shadow: true,
                    align: 'b',
                });
            }
        },
    },

    plugins: 'viewport',

    layout: {
        type: 'border',
    },

    items: [
        {
            region: 'north',
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'middle',
            },
            margin: '2 0 2 5',
            height: 38,
            items: [
                {
                    xtype: 'proxmoxlogo',
                },
                {
                    padding: '0 0 0 5',
                    xtype: 'versioninfo',
                },
                {
                    flex: 1,
                },
                {
                    xtype: 'button',
                    reference: 'usernameinfo',
                    style: {
                        // proxmox dark grey p light grey as border
                        backgroundColor: '#464d4d',
                        borderColor: '#ABBABA',
                    },
                    margin: '0 5 0 0',
                    iconCls: 'fa fa-user',
                    menu: [
                        {
                            reference: 'themeButton',
                            iconCls: 'fa fa-paint-brush',
                            text: gettext('Color Theme'),
                        },
                        {
                            iconCls: 'fa fa-language',
                            text: gettext('Language'),
                            reference: 'languageButton',
                        },
                        {
                            iconCls: 'fa fa-mobile',
                            text: gettext('Switch to Mobile View'),
                            reference: 'mobileButton',
                        },
                        '-',
                        {
                            reference: 'logoutButton',
                            iconCls: 'fa fa-sign-out',
                            text: gettext('Logout'),
                        },
                    ],
                },
            ],
        },
        {
            xtype: 'panel',
            scrollable: 'y',
            border: false,
            region: 'west',
            layout: {
                type: 'vbox',
                align: 'stretch',
            },
            items: [
                {
                    xtype: 'quarantinenavigationtree',
                    reference: 'navtree',
                    minWidth: 180,
                    // we have to define it here until extjs 6.2 because of a bug where a
                    // viewcontroller does not detect the selectionchange event of a treelist
                    listeners: {
                        selectionchange: 'navigate',
                    },
                },
                {
                    xtype: 'box',
                    cls: 'x-treelist-pve-nav',
                    flex: 1,
                },
            ],
        },
        {
            xtype: 'panel',
            layout: {
                type: 'card',
            },
            region: 'center',
            border: false,
            reference: 'contentpanel',
        },
    ],
});
