/// class PD.Manage.Modules.SelectionListItemGrid
// using PD.Web.UI.Controls.Control

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

    //===================================
    // FIELDS
    //===================================

    _grid: null,
    _toolbar: null,
    _listId: null,
    _listName: null,

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

    get_grid: function () {
        return this._grid;
    },

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

    onInit: function () {

        var that = this;

        this.subscriptions.add("selection-list-item/create", function (e) {
            that.get_grid().refresh({
                selections: [e.id]
            });
        });

        this.subscriptions.add("selection-list-item/edit", function (e) {
            that.get_grid().refresh();
        });

        this.subscriptions.add("selection-list-item/delete", function (e) {
            that.get_grid().refresh({
                clear: true
            });
        });

        this._initGrid();
        this._initToolbar();

    },

    //===================================
    // PUBLIC METHODS
    //===================================

    refresh: function (options) {
        this.get_grid().refresh(options);
    },

    load: function (list) {
        this._listId = list ? list.id : null;
        this._listName = list ? list.name : null;
        this._grid.refresh({
            clear: true
        });
        if (this._listName) {
            this.get_node().find(".-pd-title-minimal").html("List Items in <span style='color:#007acc;'>" + this._listName + "</span>")
        }
        else {
            this.get_node().find(".-pd-title-minimal").html("List Items");
        }
    },

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

    template: function () {
        return [
            "<div>",
                "<div style='position:absolute;top:0;left:0;right:0;height:30px;' class='-pd-title-minimal'>List Items</div>",
                "<div style='position:absolute;top:40px;left:0;right:0;bottom:0;' data-id='toolbar'></div>",
                "<div style='position:absolute;top:80px;left:0;right:0;bottom:0;border:1px solid #DDDDDD;' data-id='grid'></div>",
            "</div>"
        ];
    },

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

    _initGrid: function () {

        var that = this;

        this._grid = new PD.Web.UI.Controls.Grid({
            insertAt: "[data-id='grid']",
            pk: "id",
            selectOnRightClick: true,
            selection: {
                map: function (e) {
                    return _.map(e.selections.toArray(), function (item, index) {
                        return {
                            id: item.id,
                            name: item.name
                        };
                    });
                }
            },
            dragAndDrop: {
                drop: function (e) {
                    
                    var service = new PD.Manage.Services.SelectionListItemService();

                    if (e.selections.count() > 0) {
                        service.reorderListItems(that._listId, e.item.id, e.selections.toIDs().toArray(), function () {
                            that._grid.refresh();
                        });
                    }

                }
            },
            resizable: true,
            modules: [
                "PD.Web.UI.Controls.GridDragModule",
                "PD.Web.UI.Controls.GridDropModule"
            ],
            dataSource: {
                schema: {
                    data: "data"
                },
                transport: {
                    read: {
                        url: PD.Path.resolve("~/manage/selectionlist/listitems"),
                        data: function () {
                            return {
                                listId: that._listId
                            }
                        }
                    }
                }
            },
            change: function (e) {

                PD.context.get_default().get_commands().setState({
                    "pd/selection-list": {
                        selectionListItems: e.selections.toArray()
                    }
                });

            },
            dblclick: function (e) {
                PD.context.get_default().get_commands().execute("pd/selection-list:selection-list-item/edit-dialog");
            },
            columns: [
                new PD.Web.UI.Controls.GridIconColumn({
                    field: "icon"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "name",
                    title: "Name",
                    width: "200px"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "value",
                    title: "Value",
                    width: "200px"
                }),
                new PD.Web.UI.Controls.GridColumn({
                    field: "customID",
                    title: "Custom ID",
                    width: "200px"
                }),
                new PD.Web.UI.Controls.GridIconColumn({
                    field: "inUse",
                    titleText: "In Use?",
                    titleIcon: "SIGN_WARNING.PNG",
                    tooltip: "Item Is In Use",
                    transform: function (data) {
                        return (data.inUse ? "SIGN_WARNING.PNG" : null);
                    }
                }),
                new PD.Web.UI.Controls.GridIconColumn({
                    field: "isDisabled",
                    titleText: "Disabled?",
                    titleIcon: "SIGN_FORBIDDEN.PNG",
                    tooltip: "Item Is Disabled",
                    transform: function (data) {
                        return (data.isDisabled ? "SIGN_FORBIDDEN.PNG" : null);
                    }
                }),
                new PD.Web.UI.Controls.GridFillColumn()
            ],
            contextMenu: {
                type: "PD.Manage.Modules.SelectionListItemContextMenu",
                context: function () {
                    return {
                        grid: that._grid
                    };
                }
            }
        });

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

    },

    _initToolbar: function () {

        var that = this,
            grid = this._grid;

        this._toolbar = new PD.Web.UI.Controls.Toolbar({
            insertAt: "DIV[data-id=toolbar]",
            segments: [
               new PD.Manage.Modules.SelectionListItemToolbar(function (e) {
                   return {
                       grid: grid,
                       listId: that._listId
                   }
               })
            ]
        });

        this.get_children().add(this._toolbar);

    }
    
});