OperatorUnits = function( data ) {

    this.rootElement = null;
    this.unitsDataGrid = {};
    this.operatorData = $.extend( true, {}, data );

}

OperatorUnits.prototype.constructor = OperatorUnits;


OperatorUnits.prototype.element = function() {

    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }

    instance.rootElement= $("<div>").addClass( "OperatorUnits" ).css( { "height": "100%", "padding" : "5px" })

    instance.refresh();

    return instance.rootElement;
}

OperatorUnits.prototype.load = function() {
    let instance = this;

    let loading = $.Deferred();
    let loadPanel = $("<div>").dxLoadPanel( {
        message : "Loading Units...",
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo($("body")).dxLoadPanel( "instance" );
    loadPanel.show();

    let loaded = {
        segments : false,
        units : false,
        distributors : false,
        cuisines : false,
        chainDistribution : false
    }

    loading.progress( function( notify ) {

        loaded[notify] = true;

        console.log( "notify", notify );
        console.log( "loaded", loaded );

        let resolve = true;
        for( x in loaded ) {
            if( ! loaded[x] ) {
                resolve = false;
            }
        }

        if( resolve ) {
            loadPanel.hide();
            loading.resolve();
        }


    })


    Fse.Data.newDataSource( { object : "OPR.chainDistribution", objectParams : { "chainOperatorId" : instance.operatorData.operatorId }, keyField : "territoryId", paginate : false } )
        .load()
        .done( function( chainDistributionData ) {

            instance.allChainDistribution = chainDistributionData;

            instance.distributionDataSource = new DevExpress.data.DataSource( { store : { type : "array", data : chainDistributionData, key : "territoryId" } } );
            loading.notify( "chainDistribution" )

        })


    Fse.Data.newDataSource( { object : "OPR.segments", keyField : "clientSegId", paginate : false } ).store().load().done( function( segmentData ) {

        instance.allSegments = segmentData;
        loading.notify( "segments" )

    })


    Fse.Data.newDataSource( { object : "OPR.cuisines" } ).store().load().done( function( cuisineData ) {

        instance.allCuisines = cuisineData;
        loading.notify( "cuisines" )

    })





    Fse.Data.newDataSource( { object : "OPR.operatorUnits", paginate : false, keyField : "operatorId", objectParams : { operatorId : instance.operatorData.operatorId } } )
        .load()
        .done( function( units ) {


            instance.allUnits = units;

            let unitTerritories = {};
            let territoryFilter = [];
            units.forEach( function( unit ) {
                if( ! unitTerritories[unit.territoryId] ){
                    unitTerritories[unit.territoryId] = unit.territoryId
                    if( territoryFilter.length ) {
                        territoryFilter.push( "or" );
                    }
                    territoryFilter.push( [ "cdr_territoryId", "=", unit.territoryId ])
                }
            })

            
            let dataObject = "CDR.distributors";
            dataObject = "CDR.distributorsLight";
            
            let distributorDataSource = Fse.Data.newDataSource( { object : dataObject, paginate : true, pageSize: 10000, keyField : "cdr_recordId" } );
            distributorDataSource.filter( [[ "crmActive", "=", "Y" ], "and", [ "cdr_dstCompanyType", "=", "B" ]] );

            distributorDataSource
                .load()
                .done( function( distributorData ) {
                
                        instance.allDistributors = distributorData;
                        loading.notify( "distributors" );
                        
                    })
                .then( function( t ) {
                    // console.log( "then", t );
                })
                .fail( function( f ) {
                    // console.log( "fail", f );
                    instance.allDistributors = [];
                    loading.notify( "distributors" );
            })
        
        
            loading.notify( "units" );

        })

    return loading;

}


OperatorUnits.prototype.refresh = function() {

    let instance = this;
    instance.load().done( function() {
        instance.repaint();
    })
}

OperatorUnits.prototype.repaint = function() {

    let instance = this;

    let helpToolbar = $("<div>").dxToolbar( {
        items : [
            { widget: "dxButton", location: "after", options : {
                type : "normal",
                icon :"help",
                hint : "View Help",
                onClick : function( e ) {
                        Fse.Portal.showQuickHelp( "OperatorUnits" );
                    }
                }}
        ]
    }).dxToolbar( "instance" ); 

    instance.createHQForm();
    instance.createDistributionDataGrid();

    instance.hqForm.option( "formData", instance.operatorData );

    instance.rootElement.empty();
    instance.unitsDataGrid = {};


    let boxItems = [];

    // instance.rootElement.append( helpToolbar.element() );
    boxItems.push( { baseSize : 30, template : function() { return helpToolbar.element() }})

    // instance.rootElement.append( instance.hqForm.element() );
    boxItems.push( { baseSize : 155, template : function() { return instance.hqForm.element() }});

    let toolbar = $("<div>").dxToolbar( {
        items : [

            {
                location : "before",
                widget : "dxButton",
                options : {
                    text : "Link Unit",
                    onClick : function( e ) {
                        if( instance.isDirty()) {
                            alert( "You must save changes first" );
                            return;
                        }
                        instance.linkUnit();
                    }
                }
            },

            {
                location : "before",
                widget : "dxButton",
                options : {
                    text : "New Unit",
                    onClick : function( e ) {
                        if( instance.isDirty()) {
                            alert( "You must save changes first" );
                            return;
                        }
                        instance.addNewUnit();
                    }
                }
            },


            { 
                location : "after",
                template : function() {
                    instance.saveButton = $("<div>").dxButton( {
                        text : "Save",
                        type : "default",
                        disabled : true,
                        onClick : function( e ) {
                            instance.save();
                        }
                    }).dxButton( "instance" );
                    return instance.saveButton.element();
                }
            }
        ]
    }).dxToolbar( "instance" )

    toolbar.element().css( { "xpadding-top" : "10px", "xpadding-bottom" : "10px" });
    
    //instance.rootElement.append( toolbar.element() )
    boxItems.push( { baseSize : 30, template : function() { return toolbar.element() }})


    const unitInstructionsText = "To change unit specific values, click on the existing values or blank space underneath each column header.";
    // "Change the unit specific values for Unit #, Distributor, Buying decision and if appropriate Segment, Cusine, and Seasonality below.  You may also change the territory level Distribution Partner and % of System."

    let instructions = $("<p>").css( { "font-size" : "larger", "xborder": "1px solid lime" } ).text( unitInstructionsText );
    // instance.rootElement.append( instructions );
    boxItems.push( { baseSize : 40, template : function(){ return instructions }});


    // instance.rootElement.append( instance.distributionDataGrid.element() );
    boxItems.push( { ratio : 1, template : function() { return instance.distributionDataGrid.element() } })

    instance.rootElement.dxBox( {
        height : "100%", 
        direction : "col",
        items : boxItems
    })

}


OperatorUnits.prototype.isDirty = function() {

    if( this.saveButton ) {
        return this.saveButton.option( "disabled" ) ? false : true
    } else {
        return false;
    }
    
}

OperatorUnits.prototype.save = function() {

    let instance = this;


    let dataToSave = {
        hq : instance.hqForm.option( "formData" ),
        distributionChanges : instance.distributionDataGrid.option( "editing.changes" ),
        unitChanges : []
    }

    for( const territoryId in instance.unitsDataGrid ) {
        let unitsDataGrid = instance.unitsDataGrid[territoryId];
        let unitChanges = unitsDataGrid.option( "editing.changes" );
        unitChanges.forEach( function( c ) {
            dataToSave.unitChanges.push( c );
        })
    }

    Fse.Ajax.performAction( {
        object : "OPR.saveUnits",
        data : dataToSave
    }).done( function( result ) {

        instance.distributionDataGrid.saveEditData();
        for( const territoryId in instance.unitsDataGrid ) {
            let unitsDataGrid = instance.unitsDataGrid[territoryId];
            unitsDataGrid.saveEditData();
        }
        
        instance.saveButton.option( "disabled", true );

        Fse.UI.toast( `Units Saved`, "success", 1000 );

        instance.refresh();

    })


}

OperatorUnits.prototype.createHQForm = function() {

    let instance = this;

    let hqSeasonalityText = null

    if( instance.operatorData.seasonOpenDate ) {
        hqSeasonalityText = DevExpress.localization.formatDate( new Date( instance.operatorData.seasonOpenDate ), "MMM dd" )
                        + " - " +
                        DevExpress.localization.formatDate( new Date( instance.operatorData.seasonCloseDate ), "MMM dd" )
    }

    const followsHQText = "Follows HQ";
    const variesByUnitText = "Varies by Unit";

    
    instance.hqForm = $("<div>").dxForm( {
        items : [
            { 
                dataField : "unitsFollowSegment", 
                label : { 
                    text : "Unit's Segment", 
                    location : "left"
                },
                editorType : "dxRadioGroup",
                editorOptions : {
                    items : [
                        { text : followsHQText, hint : instance.operatorData.segmentName,  value : "Y", 
                            template : function( itemData ) {
                                return $("<div>").text( itemData.text ).attr( { title : itemData.hint ? itemData.hint : "No HQ Value Set" } );
                            } 
                        },
                        { text : variesByUnitText, value : "N" }
                    ],
                    valueExpr : "value",
                    layout : "horizontal"
                }
            },
            { 
                dataField : "unitsFollowCuisine", 
                label : { 
                    text : "Unit's Cuisine", 
                    location : "left"
                },
                editorType : "dxRadioGroup",
                editorOptions : {
                    items : [
                        { text : followsHQText, hint : instance.operatorData.cuisine, value : "Y",
                            template : function( itemData ) {
                                return $("<div>").text( itemData.text ).attr( { title : itemData.hint ? itemData.hint : "No HQ Value Set" } );
                            } 
                        },
                        { text : variesByUnitText, value : "N" }
                    ],
                    valueExpr : "value",
                    layout : "horizontal"
                }
            },
            { 
                dataField : "unitsFollowSeasonality", 
                label : { 
                    text : "Unit's Seasonality", 
                    location : "left"
                },
                editorType : "dxRadioGroup",
                editorOptions : {
                    items : [
                        { text : followsHQText, hint : hqSeasonalityText, value : "Y",
                            template : function( itemData ) {
                                return $("<div>").text( itemData.text ).attr( { title : itemData.hint ? itemData.hint : "No HQ Value Set" } );
                            }                         },
                        { text : variesByUnitText, value : "N" }
                    ],
                    valueExpr : "value",
                    layout : "horizontal"
                }
            },


            { 
                dataField : "chainHQUnitNotes", editorType : "dxTextArea", editorOptions : { maxLength : 1000, height : "3em" },
                label : { text : "Unit Notes (these notes are visible in the profile of the units below)", location : "top" }
            }
          
        ],

        onFieldDataChanged : function( e ) {

            let columnId = null;
            let columnOptions = null;

            if( e.dataField == "unitsFollowSegment" ) {

                columnId = "oprSegment";
                if( e.value == "Y" ) {
                    columnOptions =  { visible : false } ;
                } else {
                    columnOptions =  { visible : true } ;
                }
            }

            if( e.dataField == "unitsFollowCuisine" ) {
                columnId = "cuisineId";
                if( e.value == "Y" ) {
                    columnOptions = { visible : false };
                } else {
                    columnOptions = { visible : true };
                }
            }

            if( e.dataField == "unitsFollowSeasonality" ) {

                columnId = ["seasonOpenDate", "seasonCloseDate" ];
                if( e.value == "Y" ) {
                    columnOptions ={ visible : false };
                } else {
                    columnOptions ={ visible : true };
                }
            }

            if( columnId ) {
                if( ! Array.isArray( columnId )) {
                    columnId = [ columnId ];
                }

                for( let tid in instance.unitsDataGrid ) {

                    let dataGrid = instance.unitsDataGrid[tid];
                    columnId.forEach( function( cid ) {
                        dataGrid.columnOption( cid, columnOptions );
                    })

                }

            }

            if( instance.saveButton ) {
                instance.saveButton.option( "disabled", false );
            }
    
        }

    }).dxForm( "instance");


}

OperatorUnits.prototype.createDistributionDataGrid = function() {

    let instance = this;

    instance.distributionDataGrid = $("<div>").dxDataGrid( {
        dataSource : instance.distributionDataSource,
        scrolling : { mode : "virtual" },
        height : "100%",
        showBorders : true,
        editing : {
            allowUpdating : true,
            mode : "batch",
            editRowKey : "operatorId"
        },

        onOptionChanged : function( e ) {
            if( e.name == "editing" ) {
                let changes = e.component.option( "editing.changes" );
                if( changes && changes.length ) {
                    instance.saveButton.option( "disabled", false );
                }
            }
        },

        onToolbarPreparing : function( e ) {

            if( e.toolbarOptions.items ) {

                let newItems = [];

                e.toolbarOptions.items.forEach( function( tbi ) {
                    if( ! ( tbi.name == "saveButton" || tbi.name == "revertButton" )) {
                        newItems.push( tbi );
                    }
                })

                if( newItems.length ) {
                    e.toolbarOptions.items = newItems;
                } else {
                    delete e.toolbarOptions.items;
                }

            }
        },
        columns : [

            { dataField : "territoryName", allowEditing : false, caption : "Territory",
            cellTemplate : function( container, options ) {
                container.append( $("<div>").css( { "font-weight" : "bold" } ).text( options.displayValue ) )
            } },
            { dataField : "distributionPartnerId", caption : `${getText( 'DISTRIBUTOR' )}`,
                lookup : {
                    dataSource : { 
                        store : Fse.Data.newDataSource( { object : "CDR.distributorsLight", keyField : "cdr_recordId" }).store(),
                        pageSize : 100,
                        paginate : true
                    }, // CDR.parentDistributors
                    displayExpr : "cdr_dstName",
                    valueExpr : "cdr_recordId",
                    allowClearing : true
                }
            },
            { dataField : "systemPercentage", caption : "% of System", format : "percent", dataType : "number", width : 100 }

        ],
        masterDetail : {

            enabled : true,
            autoExpandAll : true,
            template : function( container, options ) {
                let unitsGrid = instance.createUnitsDataGrid( options.key );
                container.append( unitsGrid.element() );
            }
        }
    }).dxDataGrid( "instance" );


}

OperatorUnits.prototype.createUnitsDataGrid = function( territoryId ) {


    let instance = this;

    let editing = {
        changes : null
    }
    if( instance.unitsDataGrid[territoryId] ) {
        editing = instance.unitsDataGrid[territoryId].option( "editing" );
    }

    let unitsDataGrid = $("<div>").dxDataGrid( {

        rowAlternationEnabled : true,
        dataSource : { filter : [ "territoryId", "=", territoryId ], store : { type : "array", data : instance.allUnits, key : "operatorId" } },
        editing : {
            allowUpdating : true,
            mode : "batch",
            editRowKey : "operatorId"
        },
        onOptionChanged : function( e ) {
            if( e.name == "editing" ) {
                let changes = e.component.option( "editing.changes" );
                if( changes && changes.length ) {
                    instance.saveButton.option( "disabled", false );
                }
            }
        },
        showBorders : true,
        scrolling : { mode : "virtual" },
        onToolbarPreparing : function( e ) {

            if( e.toolbarOptions.items ) {

                let newItems = [];

                e.toolbarOptions.items.forEach( function( tbi ) {
                    if( ! ( tbi.name == "saveButton" || tbi.name == "revertButton" )) {
                        newItems.push( tbi );
                    }
                })

                if( newItems.length ) {
                    e.toolbarOptions.items = newItems;
                } else {
                    delete e.toolbarOptions.items;
                }

            }
        },

        columns : [


            { dataField : "unitNbr", caption : "Unit #", width : 80 },

            { dataField : "companyName", caption : "Unit Name", allowEditing : false },

            { name : "address", caption : "City/State", allowEditing : false, width : 150,
              cellTemplate : function( container, options ) {

                if( options.rowType != "data" ) {
                    return;
                }

                let content = $("<div>")
                    .append( $("<div>").text( `${options.data.city}, ${options.data.state}`))


                container.append( content );

              }
        
            },

            { name : "contact", caption : "Contact", allowEditing : false, width : 120,
              cellTemplate : function( container, options ) {

                if( options.rowType != "data" ) {
                    return;
                }


                let primaryContact = {
                    firstName : options.data.firstName,
                    lastName : options.data.lastName,
                    email : options.data.email
                }

                if( primaryContact.firstName ) {

                    let content = $("<div>")

                    let fullName = `${primaryContact.firstName} ${primaryContact.lastName}`;
                    let nameElement = $("<div>")
                    if( primaryContact.email ) {
                        let a = $("<a>")
                            .attr({ "href" : `mailto:${primaryContact.email}` })
                            .text( fullName )
                            .on( "click", function( e ) {
                                Fse.Portal.showEmailDialog( a[0] )
                                return false;
                            })
                        nameElement.append( a );
                    } else {
                        nameElement.text( fullName  );
                    }
                    content.append( nameElement );
                    container.append( content );
                }


                
              }
        
            },            

            { dataField : "oprSegment", 
                caption : "Segment", width : 150, 
                visible : instance.operatorData.unitsFollowSegment == "N",
                lookup : { 
                    dataSource : { store : { type : "array", data : instance.allSegments, key : "clientSegId" } },
                    valueExpr : "clientSegId",
                    displayExpr : "segmentName",
                    allowClearing : true
                }
            }, 
            { dataField : "cuisineId", caption : "Cuisine", visible : instance.operatorData.unitsFollowCuisine == "N", 
            width : 150,
                lookup : { 
                    dataSource : { store : { type : "array", data : instance.allCuisines, key : "cuisineId" } },
                    valueExpr : "cuisineId",
                    displayExpr : "cuisine",
                    allowClearing : true
                }
            }, 

            { dataField : "seasonOpenDate", caption : "Opens On", dataType : "date", width : 75, format : "MMM dd", visible : instance.operatorData.unitsFollowSeasonality == "N" },
            { dataField : "seasonCloseDate", caption : "Closes On", dataType : "date", width : 75, format : "MMM dd", visible : instance.operatorData.unitsFollowSeasonality == "N" },

            { dataField : "distrib1", caption : `Unit ${getText( 'DISTRIBUTOR' )}`, lookup : {
                dataSource : {
                    store : Fse.Data.newDataSource( { object : "CDR.distributorsLight",  key : "cdr_recordId" } ).store(),
                    filter :  [
                        // [ "territoryId", "=", territoryId ], 
                        [ "relatedTerritoryIds", "contains", `#${territoryId};` ],
                        "and", [ "crmActive", "=", "Y" ], "and", [ "cdr_dstCompanyType", "=", "B" ]],
                    xfilter :  [[ "crmActive", "=", "Y" ], "and", [ "cdr_dstCompanyType", "=", "B" ]]
                },
                valueExpr : "cdr_recordId",
                displayExpr : "cdr_dstName",
                allowClearing : true 
                }
            },

            { dataField : "buyingDecisions", caption : "Buy Dec.", width : 70 },
            { dataField: "lastInteractionDate", caption : "Last Int.", dataType : "date", width : 80, allowEditing : false  },

            { name : "unitActions", visible : true, showInColumnChooser : false, width : 30, allowEditing : false,
                type: "buttons",
                buttons: [{
                    template: function(data) {
                        let button = $("<div>").addClass("dx-icon-overflow").css( { "display" : "inline-block", "cursor" : "pointer" });
                        return button;
                    }
                }]
            }


        ],

        onCellClick : function( cce ) {
            if( cce.rowType != "data" ) {
                return;
            }

            const data = cce.data;

            if( cce.column.name === "unitActions" ) {
                // create a context menu

                if( data.operatorId ) {

                    let items = [
                        // { text : "Quick View", actionCode : "quickView" }
                    ];

                    // if( OperatorPortfolio.getInstance()) {
                    //     items.push(
                    //        { text : `Go to '${data.companyName}'`, actionCode : "operatorProfile" }
                    //     )
                    // }

                    items.push( { text : "View/Edit Unit Profile", actionCode : "viewEditUnitProfile" } );

                    // items for delete
                    // items.push( { text : "Delete...", actionCode : "deleteOperator" } );

                    // items for list management

                    if( items.length == 0 ) {
                        return;
                    }


                    $("<div>").dxContextMenu( {
                        items : items,
                        hideOnOutsideClick : true,
                        onHidden : function( cme ) {
                            cme.component.element().remove();
                            cme.component.dispose();
                        },
                        onItemClick : function( cme ) {

                            if( cme.itemData.actionCode ) {
                                switch ( cme.itemData.actionCode ) {
                                    case 'quickView' :
                                        OperatorPortfolio.showOperatorProfileDialog( data.operatorId );
                                    break;

                                    case "viewEditUnitProfile" : 
                                        OperatorProfile.openPopupEditor( data.operatorId );
                                    break;
                                    
                                    case 'operatorProfile' :
                                        OperatorPortfolio.getInstance().gotoProfile( data );
                                    break;

                                    /*
                                    case 'deleteOperator' : {
                                        OperatorPortfolio.showDeleteOperatorDialog( data.operatorId, data.operatorTk, function() {
                                            instance.refresh();
                                        } );
                                    } break;
                                    */

                                }
                            }

                            cme.component.hide();
                        },
                        target : cce.cellElement
                    }).appendTo( "body" ).dxContextMenu("show");

                    
                }

            }

        }        

    }).dxDataGrid( "instance" );


    if( editing.changes ) {
        unitsDataGrid.option( "editing.changes", editing.changes );
    }
    
    instance.unitsDataGrid[territoryId] = unitsDataGrid;

    return unitsDataGrid;

}

OperatorUnits.prototype.addNewUnit = function() {

    let instance = this;

    let newOperatorProfileDialog = new NewOperatorProfileDialog( {

        oprParentCo : instance.operatorData.operatorId,
        initial1FSSearchTypes : [ "I", "U" ],
        onReturn : function( operatorData ) {

            if( operatorData ) {
                instance.refresh();
                // instance.viewProfile( operatorData );
            }

        }

    });

    newOperatorProfileDialog.show();    
}

OperatorUnits.prototype.linkUnit = function() {

    let instance = this;

    OperatorPortfolio.pickOperator( {
        message : `Select an independent ${getText( 'OPERATOR' ).toLowerCase()} profile that is not already mapped to 1FS to link as unit of ${instance.operatorData.companyName}`,
        filter : [[ "oneFSMapped", "=", 0 ], "and", [ "oprCompanyType", "=", "0" ], "and", [ "independentYN", "=", 1 ]],
        onSuccess : function( operatorData ) {

            console.log( "Picked Operator" );
            console.log( operatorData )           

            if( operatorData && operatorData.length ) {

                let dataToSend = {
                    chainOperatorId : instance.operatorData.operatorId,
                    unitOperatorId : [] 
                }

                operatorData.forEach( function( o ) {
                    dataToSend.unitOperatorId.push( o.operatorId );
                })

                Fse.Ajax.performAction( {
                    object : "OPR.linkExistingOperatorAsUnit",
                    data : dataToSend
                }).done( function( result ) {
                    console.log( "RESULT" );
                    console.log( result );
                    instance.refresh();
                })

            }
        }
    })
}