/// class PD.Manage.Modules.Maintenance.MaintenanceUsers
// using PD.Web.UI.Controls.Control

PD.Manage.Modules.Maintenance.MaintenanceUsers =
PD.Web.UI.Controls.Control.extend({

    //===================================
    // FIELDS
    //===================================
    
    _grid: null,

    //===================================
    // PROPERTIES
    //===================================

    get_grid: function () {
        return this.get_node().find("DIV[data-id=users-grid]");
    },

    get_usersAddButton: function () {
        return this.get_node().find("BUTTON[data-id=users-add]");
    },

    get_usersRemoveButton: function () {
        return this.get_node().find("BUTTON[data-id=users-remove]");
    },

    //===================================
    // EVENT HANDLERS
    //===================================

    onInit: function () {
        this._grid_init();
    },

    onActivate: function () {

        var that = this;

        this.get_usersAddButton().on("click", function (e) {
            that._showIdentityBrowser();
        });

        this.get_usersRemoveButton().on("click", function (e) {
            that._removeUserPrompt();
        });

    },

    //===================================
    // PROTECTED METHODS
    //===================================

    template: function () {
        return [
            "<div class='maintenance-users'>",
                "<div data-id='users-title' class='-pd-title-compact'>",
                    "Allowed Users List",
                "</div>",
                "<div data-id='users-list'>",
                    "<div data-id='users-grid'></div>",
                "</div>",
                "<div data-id='users-button-deck'>",
                    "<button data-id='users-add'>Add User(s)</button>",
                    "<button data-id='users-remove'>Remove User(s)</button>",
                "</div>",
            "</div>"
        ];
    },

    //===================================
    // PRIVATE METHODS
    //===================================

    _grid_init: function () {

        var that = this;

        this._grid = new PD.Web.UI.Controls.Grid({
            insertAt: "[data-id=users-list]",
            pk: "id",
            dataSource: {
                data: this.get_options().allowedUsers
            },
            messaging: {
                noRecordsMessage: "No users allowed access."
            },
            resizable: true,
            sortable: true,
            change: function (e) {
                that.get_usersRemoveButton().prop("disabled", e.selections.count() == 0);
            },
            columns: [
                new PD.Web.UI.Controls.GridIconColumn({
                    field: "icon",
                    icon: "USER.PNG"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "displayName",
                    title: "Name",
                    width: "120px"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "name",
                    title: "User ID",
                    width: "120px"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "id",
                    title: "id",
                    width: "10px",
                    hidden: true
                }),
                new PD.Web.UI.Controls.GridFillColumn()
            ]
        });

        this.get_children().add(this._grid);

    },

    _showIdentityBrowser: function () {

        var that = this;
        
        PDJS.Shared.Security.IdentityBrowserDialog.open({
            title: "Find Users",
            filters: [PDJS.Core.Views.IdentityFilter.usersOnly()],
            callbacks: {
                ok: function (sender, e) {
                    that._addUserServiceCall(_.map(e, "id"));
                }
            }
        });

    },

    _addUserServiceCall: function (ids) {

        var that = this,
            grid = this._grid,
            ds = grid.get_dataSource().get_instance();

        PD.ajax({
            type: "POST",
            url: PD.Path.resolve("~/Manage/Maintenance/AddUsers"),
            data: {
                ids: JSON.stringify(ids)
            },
            success: function (e) {
                ds.data(e);
            }
        });

    },

    _removeUserPrompt: function () {

        let grid = this._grid;
        let selections = grid.getSelections().toArray();

        Jade.UI.MessageDialog.open({
            dialogStyle: Jade.UI.MessageDialogStyle.Information,
            dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
            title: "Remove Users",
            message: `Remove the selected user from the "Allowed Users" list?`,
            select: (e) => {
                e.close();
                if (e.button === Jade.UI.MessageDialogButton.ok) {
                    this._removeUserServiceCall(_.map(selections, "id"));
                }
            }
        });

    },

    _removeUserServiceCall: function (ids) {

        var that = this,
            grid = that._grid,
            ds = grid.get_dataSource();

        PD.ajax({
            type: "POST",
            url: PD.Path.resolve("~/Manage/Maintenance/RemoveUsers"),
            data: {
                ids: JSON.stringify(ids)
            },
            success: function (e) {
                ds.data(e);
            }
        });

    }

});