ProjectManagerPopup = function( options ) {

    let instance = this;
    instance.rootElement = null;

}

ProjectManagerPopup.prototype.constructor = ProjectManagerPopup;


ProjectManagerPopup.prototype.show = function() {

    let instance = this;

    let popup = $("<div>").dxPopup( {
        title : "Projects",
        width : "auto",
        height : "auto",
        showCloseButton: false,
        contentTemplate : function() {

            let content = $("<div>")
            instance.dataGrid = instance.createDataGrid();
            instance.toolbar = instance.createToolbar();

            content.append( instance.toolbar.element() );
            content.append( instance.dataGrid.element() );

            return content;

        },
        onHidden : function( e ) {
            e.component.dispose();
        },
        hideOnOutsideClick : true,
        toolbarItems : [
            {
                toolbar : "bottom",
                location : "after",
                widget : "dxButton",
                options : {
                    text :"Close",
                    onClick : function( e ) {
                        popup.hide();
                    }
                }
            }
        ]

    }).dxPopup( "instance" );

    $("body").append( popup.element() );

    popup.show();
}

ProjectManagerPopup.prototype.dataGridColumns = function() {

    let columns = [];

    columns.push( 
        { dataField : "projectName" },
        { dataField : "startDate", dataType : "date", format : "MM/dd/yyyy" },
        { dataField : "endDate", dataType : "date", format : "MM/dd/yyyy" },
        { dataField : "projectOwnerFullName", caption : "Project Owner" }
    )

    return columns;

}

ProjectManagerPopup.prototype.createDataGrid = function() {
    let instance = this;
    let dataGrid = $("<div>").dxDataGrid( {
        columns : instance.dataGridColumns(),

        width : 600,
        height : 400,
        showBorders : true,
        filterRow : { visible : true },
        scrolling : { mode : "virtual" },
        rowAlternationEnabled : true,
        remoteOperations : {
            filtering : true,
            paging : true,
            sorting : true
        },
        onRowDblClick : function( rdce ) {
            console.log(rdce);
            
            if( rdce.rowType != "data" ) {
                return;
            }
             instance.editProject( rdce.data );
            
        },
        dataSource : instance.createDataSource()      

    }).dxDataGrid( "instance" );
    return dataGrid;
}

ProjectManagerPopup.prototype.createToolbar = function() {

    let instance = this;

    let toolbar = $("<div>").dxToolbar( {
        items : [ {
            location : "after",
            widget : "dxButton",
            options : {
                icon : "plus",
                hint : "Create New Project",
                onClick : function( e ) {
                    instance.createProject();
                }
            }
        } ]
    })

    return toolbar.dxToolbar("instance");


}

ProjectManagerPopup.prototype.createDataSource = function() {

    let instance = this;

    let dataSourceConfig = { 
        object : "WRK.projects", keyField : "projectId", paginate : true, pageSize : 50  
    }
    
    let dataSource = Fse.Data.newDataSource( dataSourceConfig );

    if( ! Fse.Portal.checkPermission( "TaskProjectAdmin") ) {
        // not the admin so limit list to only those projects are owned by the current user
        let filter = [
            "projectOwnerUserId", "=", parseInt( Fse.Portal.appConfiguration.STP.userId )
        ]
        dataSource.filter( filter );
    }
    

    return dataSource;

}

ProjectManagerPopup.prototype.editProject = function( data ) {
    console.log(data);
    let instance = this;
    let pe = new ProjectEditorPopup( data );
    pe.show().done( function( project ) {
        instance.dataGrid.refresh();
    })
}

ProjectManagerPopup.prototype.createProject = function() {
    let instance = this;
    let pe = new ProjectEditorPopup( { projectId : 0 } )
    pe.show().done( function( project ) {
        instance.dataGrid.refresh();
    })
}