MembershipChallengePopup = function() {

}


MembershipChallengePopup.prototype.constructor = MembershipChallengePopup;


MembershipChallengePopup.prototype.show = function( options ) {


    let operatorId = options.operatorId;

    let initialData = {
        challenging : null,
        reasonText : null,
        oprId : options.operatorId,
        notes : null,
        type : null,
        typeCode : null,
        one1fsOPR : null,
        relationshipField : options.relationshipField,
        noMembership : false
    }

    if( options.challengeType == "GPO" ) {
        initialData.typeCode = "G";
    } else if ( options.challengeType == "CMC" ) {
        initialData.typeCode = "C";
    } else if ( options.challengeType == "HQ" ) {
        initialData.typeCode = "P";
    } else {
        return;
    }

    let availableChallengeReasons = [];

    if( options.challenging ) {
        initialData.challenging = options.challenging;
        availableChallengeReasons.push( { "reason": "Change of Membership" } );
        availableChallengeReasons.push( { "reason": "Remove Membership" } );
        
    } else {
        initialData.reasonText = "Missing Membership";
        availableChallengeReasons.push( { "reason": "Missing Membership"} );
    }

    let challengeReasonsDataSource = new DevExpress.data.DataSource( {
        store : {
            type : "array",
            data :  availableChallengeReasons,
            key : "reason"
        }
    });

    let challengeTypesDataSource = new DevExpress.data.DataSource( {
        store : {
            type : "array",
            data : [
                { "type": "Buying Group/GPO", "typeCode": "G" },
                { "type": "Food Mgmt Co.", "typeCode": "C" },
                { "type": "Chain Account Name", "typeCode": "P" }
            ],
            key : "typeCode"
        }
    });


    challengeTypesDataSource.store().byKey( initialData.typeCode ).done( function( challengeType ) {
        initialData.type = challengeType.type;
    })

 
    



    let form = null;

    let operatorMembershipsDataSource = Fse.Data.newDataSource( {
        object : "OPR.operatorMemberships", paginate : false, keyField : "orgId"
    })

    operatorMembershipsDataSource.filter( [
        [ "affiliationType", "=", options.challengeType ],
        "and",
        [ "operatorId", "=", options.operatorId ]
    ])

    let oneFSOperatorsDataSource = Fse.Data.newDataSource( {
        object : "OPR.1fsOperators", keyField : "cho_id", objectParams : { territoryRestricted : false }
    })
    oneFSOperatorsDataSource.filter( [ "cho_type", "=", initialData.typeCode ]);


    let helpText = "Please select a challenge reason.";
    let helpTextContainer = null;

    let popup = $("<div>").dxPopup( {

        hideOnOutsideClick : true,
        title : "1FS Operator Challenge",
        height : "auto",
        width : 800,


        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        },

        toolbarItems : [
            {
                toolbar : "bottom",
                location : "after",
                widget : "dxButton",
                options : { 
                    text : "Submit", 
                    type : "default",
                    onClick : function( e ) { 

                        let vr = form.validate();
                        if( vr.isValid ) {

                            let dataToSend = form.option( "formData" );
                            // console.log( dataToSend );

                            Fse.Ajax.performAction( {
                                object : "OPR.submitChallenge", 
                                data : dataToSend
                            }).done( function( submitChallengeResult ) {
                    
                                // console.log("result");
                                // console.log( saveOperatorDetailsResult)
                    
                    
                                if( ! submitChallengeResult.status ) {
                                    Fse.UI.toast( `Challenge NOT Submitted. Try again.`, "warning", 2000 );
                                } else {
                    
                                    Fse.UI.toast( `Challenge Submitted`, "success", 1000 );
                                }

                            } );

                            popup.hide() 
                        }

                    }
                }
            }
        ],

        contentTemplate : function() {


            let oneFSOperatorsEditorOptions = {
                dataSource : oneFSOperatorsDataSource,
                showClearButton : true,
                displayExpr : "cho_name",
                valueExpr : "cho_id",
                searchEnabled : true,
                searchExpr : "cho_name",
                searchMethod : "startswith",
                placeholder : "Type to search...",
                noDataText : "No data to display (type to search)",
                minSearchLength : 1
            }

            let updateHelpText = function() {

                let reasonText = form.option( "formData" ).reasonText;


                helpText = "Please select a challenge reason.";

                let challengingEditor = form.getEditor( "challenging");

                let challengingFieldValue = challengingEditor.option( "displayValue" );

                if( reasonText == "Change of Membership" ) {
                    helpText = `${challengingFieldValue} will no longer be available on this profile and be replaced by the selection you make below.`
                } else if( reasonText == "Remove Membership" ) {
                    helpText = `${challengingFieldValue} will no longer be available on this profile. If wishing to replace the value with another, modify your selection to \"Change of Membership.\"`;
                } else if ( reasonText == "Missing Membership" ) {
                    helpText = "The selection made below will be added to this profile.";
                }

                helpTextContainer.text( helpText );

            }

            let updateFields = function() {

               
                let reasonText = form.option( "formData" ).reasonText;

                let editor;

                editor = form.getEditor( "challenging" );
                editor.option( { disabled : reasonText && reasonText != 'Missing Membership' ? false : true } );

                let one1fsOPRRequired = false;
                if( reasonText ) {
                    if( reasonText != "Remove Membership" ) {
                        one1fsOPRRequired = true;
                    }
                }                

                let editorOptions = form.itemOption( "membership.one1fsOPR" ).editorOptions;

                // editorOptions.dataSource = Fse.Data.newDataSource( {
                //     object : "OPR.1fsOperators", paginate : true, pageSize : 25, keyField : "cho_id", objectParams : { territoryRestricted : false }
                // })
            
                // editorOptions.dataSource.filter( [ "cho_type", "=", initialData.typeCode ]);

                form.beginUpdate();
                form.itemOption( "membership.one1fsOPR", "isRequired", one1fsOPRRequired );
                if( ! reasonText || reasonText == "Remove Membership" ) {
                    editorOptions.disabled = true;
                } else {
                    editorOptions.disabled = false;
                }
                form.itemOption( "membership.one1fsOPR", "editorOptions", editorOptions );

                form.endUpdate();

                if( editorOptions.disabled ) {
                     form.updateData( { "one1fsOPR" : null } );
                }

               

                editor = form.getEditor( "notes" );
                editor.option( { disabled : reasonText ? false : true }  );

                if( reasonText == "Remove Membership" ) {
                    form.updateData( { "noMembership" : true } )
                } else {
                    form.updateData( { "noMembership" : false } )
                }

                // console.log( "itemOption", form.itemOption( `membership.one1fsOPR` ));                

            }


            form = $("<div>").dxForm( {

                items : [
                    {
                        dataField : "reasonText",
                        label : { text : "Challenge Reason" },
                        isRequired : true,
                        editorType : "dxSelectBox",
                        editorOptions : {
                            dataSource : challengeReasonsDataSource,
                            placeholder : "Select reason...",
                            displayExpr : "reason",
                            valueExpr : "reason",
                            readOnly : availableChallengeReasons.length == 1 ? true : false // the reason is set based on the data and the user is no longer allowed to change it
                        }
                    },                    
                    { 
                        dataField : "typeCode",
                        label : { text : "Challenge Type" },
                        editorType : "dxSelectBox",
                        editorOptions : { 
                            readOnly : true,
                            dataSource : challengeTypesDataSource,
                            valueExpr : "typeCode",
                            displayExpr : "type"
                        },
                    },
                    {
                        dataField : "challenging",
                        label : { text : "Challenging" },
                        editorType : "dxSelectBox",
                        editorOptions : {
                            dataSource : operatorMembershipsDataSource,
                            valueExpr : "orgId",
                            displayExpr : "companyName",
                            disabled : true
                        }
                    },
                    
                    {   itemType : "group", name : "membership",
                        colSpan : 1,

                        items : [
                            {
                                template : function( options, container ) {

                                    helpTextContainer = $("<p>").css( { "font-size" : "16px", "height" : "40px" } ).text( helpText );
                                    container.append( helpTextContainer );
                                }
                            },

                            { 
                                dataField : "one1fsOPR",
                                label : { visible : false },
                                editorType : "dxSelectBox",
                                editorOptions : {
                                    dataSource : oneFSOperatorsDataSource,
                                    showClearButton : true,
                                    displayExpr : "cho_name",
                                    valueExpr : "cho_id",
                                    searchEnabled : true,
                                    searchExpr : "cho_name",
                                    searchMethod : "startswith",
                                    placeholder : "Type to search...",
                                    noDataText : "No data to display (type to search)",
                                    minSearchLength : 1
                                }
                                
                            }
                        ]
                    },
                   
                    // {
                    //     dataField : "noMembership", label : { text : "Self Managed/Independent" },
                    //     editorType : "dxCheckBox",
                    //     editorOptions : {
                    //         disabled : initialData.reasonText == "Missing Membership" ? true : false
                    //     }
                    // },
                    { 
                        dataField : "notes",
                        label : { visible : false },
                        editorType : "dxTextArea",
                        editorOptions : { 
                            height : "6em", 
                            placeholder : "Notes (optional)",
                            disabled :  true 
                         },
                    }
                ],

                onFieldDataChanged : function( e ) {

                    if( e.dataField == "challenging" ) {
                        updateHelpText();
                    }

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

                        updateFields();
                        updateHelpText();

                    }

                }

            }).dxForm( "instance" )


            form.option( "formData", initialData );

            return form.element();


        }

    }).dxPopup("instance");


    popup.element().appendTo( $("body") )

    popup.show();



}