LeadEditor = function( lead, options ) {

    this.data = lead;
    this.rootElement = null;

    this.options = options;

    if( ! this.options ) {
        this.options = $.extend( true, {}, {

            leadSaved : function( lead ) {

            }

        })
    }



}

LeadEditor.prototype.constructor = LeadEditor;

LeadEditor.prototype.element = function() {

    let instance = this;

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

    instance.rootElement = $("<div>");

    instance.load().done( function() {
        console.log( instance.data );
        instance.createUI();
    });



    return instance.rootElement;

}

LeadEditor.prototype.refresh = function() {
    let instance = this;
    instance.load().done( function() {
        instance.createUI();
    });

}

LeadEditor.prototype.load = function() {


    let d = $.Deferred();

    let instance = this;
    let dataStore = Fse.Data.newDataSource( { object : "GTM.leads", paginate : false, keyField : "submissionId" }).store();
    dataStore.byKey( instance.data.submissionId ).done( function( data ) {
        instance.data = data; //data[0];
        d.resolve( instance.data );
    })

    return d;

}


LeadEditor.prototype.createUI = function() {

    let instance = this;

    instance.rootElement.empty();
    instance.rootElement.append( $("<div>").css( "padding", "10px" ).append( instance.createForm() ) );


}


LeadEditor.prototype.saveLead = function() {

    let instance = this;

    let validationResult = DevExpress.validationEngine.validateGroup( "leadEditor" );
    if( validationResult.status === "valid" ) {


        let dataToSend = $.extend( true, {
            currentLeadStatus : instance.data.leadStatus,
            submissionId : instance.data.submissionId,
            sentToPartnerId : instance.data.sentToPartnerId,
            sentToPartnerType  : instance.data.sentToPartnerType,
            sentToContactId : instance.data.sentToContactId,
            gtmCampaignId : instance.data.gtmCampaignId
        }, instance.leadActionFields.option( "formData" ) );
        $.extend( true, dataToSend, instance.leadFields.option( "formData" ));



        // do the save
        let saveURL = Fse.Util.updateURL2( $("link#appActionURL").attr( "href" ), { object : "GTM.saveLead" } );
        $.ajax( { 
            url : saveURL,
            method : "post",
            dataType : "json",
            data : { lead : JSON.stringify( dataToSend ) }
        })
        .done( function( returnData ) {

            instance.refresh();

            if( instance.options.leadSaved ) {
                instance.options.leadSaved( returnData ); 
            }

            /*
            if( instance.creatingNewCampaign ) {
                instance.campaignId = returnData.campaignId;
            }

            saving.notify( "campaignData" );
            */
        })
        .fail( function( errorData ) {
            console.log( "failed");
        })




    }
}

LeadEditor.prototype.createForm = function() {

    let instance = this;

    let sentTo = $("<div>")

    instance.campaignFields = $("<div>").dxForm( {
        formData : instance.data,
        readOnly : true,
        items : [
            "campaignType", "campaignName", "territoryName"
        ]
    }).dxForm("instance");


    let companyActions = [ { text : "use existing" } ];

    if( Fse.Portal.checkPermission( "OperatorManagementEdit" ) ) { // || ( instance.data.leadStatus != '?' && instance.data.leadCompanyAction == "update existing")
        companyActions.push( { text : "update existing" } );
    }

    if( Fse.Portal.checkPermission( "OperatorManagementAdd" ) ) { // || ( instance.data.leadStatus != "?" && instance.data.leadCompanyAction == "new company" )
        companyActions.push( { text : "new company" } );
    }

    let leadStatuses = [
        { "leadStatus" : "?", "leadStatusDisplay" : "OPEN" }, { "leadStatus" : "A", "leadStatusDisplay" : "APPROVED" }, { "leadStatus" : "R", "leadStatusDisplay" : "REJECT" }
    ];

    if( instance.data.leadStatus == "R" ) {
        leadStatuses = [
            { "leadStatus" : "?", "leadStatusDisplay" : "OPEN" }, { "leadStatus" : "R", "leadStatusDisplay" : "REJECT" }
        ];
    } else if( instance.data.leadStatus == "A" ) {
        leadStatuses = [
            { "leadStatus" : "A", "leadStatusDisplay" : "APPROVED" }
        ];
    }

    instance.leadActionFields =  $("<div>").dxForm( {
        validationGroup : "leadEditor",
        readOnly : instance.data.leadStatus === "A" ? true : false,
        formData : { 
            leadStatus : instance.data.leadStatus,
            companyAction : instance.data.leadCompanyAction ? instance.data.leadCompanyAction : "use existing",
            contactAction : instance.data.leadContactAction ? instance.data.leadContactAction : "use existing"
        },
        items : [
            { dataField : "leadStatus", editorType : "dxSelectBox", 
                    editorOptions : {
                        dataSource : { store : { 
                            type : "array", 
                            data : leadStatuses, 
                            key : "leadStatus" 
                        }},
                        valueExpr : "leadStatus", displayExpr : "leadStatusDisplay", keyExpr : "leadStatus"
                }
            },
            {
                dataField : "companyAction", editorType : "dxRadioGroup", label : { text : "Company" },
                editorOptions : {
                    disabled : true,
                    layout : "horizontal",
                    displayExpr : "text",
                    valueExpr : "text",
                    items : companyActions
                }
            },
            {
                dataField : "contactAction", editorType : "dxRadioGroup", label : { text : "Contact" },
                    editorOptions : {
                        disabled : true,
                        layout : "horizontal",
                        displayExpr : "text",
                        valueExpr : "text",
                        items : [ { text : "use existing" }, { text : "update existing" } , { text : "new contact" } ]
                    }
            },
            {
                itemType : "button", horizontalAlignment : "right", name : "applyButton", buttonOptions : {
                    text : "Apply", disabled : true, type : "success",
                    onClick : function( e ) {
                        instance.saveLead();
                    }
                }
            }
        ]

    }).dxForm( "instance" );



  
    let labelTemplate = function( options ) {

        let label = $("<span>").text( options.text );
        let data = options.component.option( "formData" );

        let highlight = false;
        if( options.dataField == "companyName" ) {
            if( data[options.dataField] != data.sentToCompanyName ) {
                highlight = true;
            }
        }
        if( options.dataField == "contactEmail" ) {
            console.log( )
            if( data[options.dataField] !== data.sentToEmail ) {
                highlight = true;
            }
        }
        if( options.dataField == "contactFirstName" ) {
            if( data[options.dataField] !== data.sentToFirstName ) {
                highlight = true;
            }
        }
        if( options.dataField == "contactLastName" ) {
            if( data[options.dataField] !== data.sentToLastName ) {
                highlight = true;
            }
        }

        if( options.dataField == "companyAddress1" ) {
            if( data[options.dataField] !== data.sentToAddress1 ) {
                highlight = true;
            }
        }

        if( options.dataField == "companyCity" ) {
            if( data[options.dataField] !== data.sentToCity ) {
                highlight = true;
            }
        }

        if( options.dataField == "companyState" ) {
            if( data[options.dataField] !== data.sentToState ) {
                highlight = true;
            }
        }

        if( options.dataField == "companyZipCode" ) {
            if( data[options.dataField] !== data.sentToZipCode ) {
                highlight = true;
            }
        }

        if( highlight ) {
            label.css( { "color" : "blue" });    
        }
        
        return label;
    }


    instance.sentToFields = $("<div>").dxForm( {
        formData : instance.data,
        readOnly : true,
                items : [
                        { dataField : "sentToFirstName", label : { text : "First Name" }},
                    { dataField : "sentToLastName", label : { text : "Last Name" }},
                    { dataField : "sentToEmail", label : { text : "Email" }},

                    { dataField : "sentToCompanyName", label : { text : "Company" }},
                    { dataField : "sentToAddress1", label : { text : "Address" }},
                    { dataField : "sentToCity", label : { text : "City" }},
                    { dataField : "sentToState", label : { text : "State" }},
                    { dataField : "sentToZipCode", label : { text : "Zip Code" }},
                    { itemType : "button", buttonOptions : {
                        text : "View Email",
                        onClick : function( e ) {

                            let leadData = instance.data;

                            let campaignRecipientDataStore = Fse.Data.newDataSource( { object : "GTM.emailCampaignRecipients", paginate : false, keyField : "recipientId", objectParams : { campaignId : leadData.emailCampaignId } }).store();

                            campaignRecipientDataStore.byKey( leadData.recipientId ).done( function( recipientData ) {
                                /*
                                if( recipientData && recipientData.length ) {
                                    EmailCampaignManager.showRecipientMessage( recipientData[0] );
                                }
                                */
                                if( recipientData )
                                    EmailCampaignManager.showRecipientMessage( recipientData )
                                
                            });

                        }
                    }, horizontalAlignment : "left" }

                   
                ]
    }).dxForm( "instance" );


    instance.leadFields = $("<div>").dxForm( {
        validationGroup : "leadEditor",
        formData : {
            contactFirstName : instance.data.leadContactId ? instance.data.leadFirstName : instance.data.contactFirstName,
            contactLastName : instance.data.leadContactId ? instance.data.leadLastName : instance.data.contactLastName,
            contactEmail : instance.data.leadContactId ? instance.data.leadEmail : instance.data.contactEmail,   
            companyName : instance.data.leadPartnerId ? instance.data.leadCompanyName : instance.data.companyName,
            companyAddress1 : instance.data.leadPartnerId ? instance.data.leadCompanyAddress1 : instance.data.companyAddress1,
            companyCity : instance.data.leadPartnerId ? instance.data.leadCompanyCity : instance.data.companyCity,
            companyState : instance.data.leadPartnerId ? instance.data.leadCompanyState : instance.data.companyState,
            companyZipCode : instance.data.leadPartnerId ? instance.data.leadCompanyZipCode : instance.data.companyZipCode
        },
        readOnly : true,

                items : [
                    { dataField : "contactFirstName",  label : { text : "First Name",  template : labelTemplate }}, 
                    { dataField : "contactLastName",  label : { text : "Last Name",  template : labelTemplate }}, 
                    { dataField : "contactEmail",  label : { text : "Email",  template : labelTemplate }}, 
                    { dataField : "companyName", label : { text : "Company",  template : labelTemplate }},
                    { dataField : "companyAddress1", label : { text : "Address",  template : labelTemplate }},
                    { dataField : "companyCity", label : { text : "City",  template : labelTemplate }},
                    { dataField : "companyState", label : { text : "State",  template : labelTemplate }},
                    { dataField : "companyZipCode", label : { text : "Zip Code",  template : labelTemplate }},
                    { itemType : "button", buttonOptions : {
                        text : "View Lead",
                        onClick : function( e ) {


                            leadData = instance.data; 
                            instance.displayLead( leadData );


                        }
                    }, horizontalAlignment : "left" }

                ]
    }).dxForm( "instance" );    


    let applyLeadStatus = function() {

        const contactFieldNames = [ "contactFirstName", "contactLastName", "contactEmail" ];
        const companyFieldNames = [ "companyName", "companyAddress1", "companyCity", "companyState", "companyZipCode" ];

        let leadStatus = instance.leadActionFields.option( "formData" ).leadStatus;



        let requireContact = false;
        let requireCompany = false;

        if( leadStatus != "A" ) {
            instance.leadActionFields.getEditor( "contactAction" ).option( "disabled", true );
            instance.leadActionFields.getEditor( "companyAction" ).option( "disabled", true );

            instance.leadFields.option( "readOnly", true );
        } else {
            instance.leadActionFields.getEditor( "contactAction" ).option( "disabled", false );
            instance.leadActionFields.getEditor( "companyAction" ).option( "disabled", false );

            instance.leadFields.option( "readOnly", false );

            let leadActions = instance.leadActionFields.option( "formData" );
            let contactFieldReadOnly = true;
            if( leadActions.contactAction != "use existing" ) {
                contactFieldReadOnly = false;
                requireContact = true;
            }

            contactFieldNames.forEach( function( contactField ) {
                let editor = instance.leadFields.getEditor( contactField );
                if( editor ) {
                    editor.option( "readOnly", contactFieldReadOnly )
                }
            })

            let companyFieldReadOnly = true;
            if( leadActions.companyAction != "use existing" ) {
                companyFieldReadOnly = false;
                requireCompany = true;
            }

            companyFieldNames.forEach( function( companyField ) {
                let editor = instance.leadFields.getEditor( companyField );
                if( editor ) {
                    editor.option( "readOnly", companyFieldReadOnly )
                }
            })

        }
        if( leadStatus != "?" || leadStatus != instance.data.leadStatus ) {
            instance.leadActionFields.getButton( "applyButton").option( "disabled", false );
        } else {
            instance.leadActionFields.getButton( "applyButton").option( "disabled", true );
        }


        contactFieldNames.forEach( function( fieldName ) {
            instance.leadFields.itemOption( fieldName, "isRequired", requireContact );
        })

        companyFieldNames.forEach( function( fieldName ) {
            instance.leadFields.itemOption( fieldName, "isRequired", requireCompany );
        })


    }

    if( instance.data.leadStatus != 'A' ) {
        applyLeadStatus();
    }

    instance.leadActionFields.option( "onFieldDataChanged", function( e ) {
        switch( e.dataField ) {
            case "leadStatus" :
                applyLeadStatus();
                break;
            case "companyAction" : {

                let contactAction = e.component.getEditor( "contactAction" );
                let contactActionOptions = {};
                if( e.value == "new company" ) {
                    // enable only the new contact option
                    contactActionOptions.items = [
                        { text : "use existing", disabled : true }, { text : "update existing", disabled : true } , { text : "new contact" }
                    ];
                    contactActionOptions.value = "new contact";
                } else {
                    // enable all contact options
                    contactActionOptions.items = [
                        { text : "use existing" }, { text : "update existing" } , { text : "new contact" }
                    ]
                    contactActionOptions.value = e.value;
                }
                contactAction.option( contactActionOptions );
                applyLeadStatus();
            }
            break;
            case "contactAction" : {
                applyLeadStatus();
            }
            break;
        }

    });

    let topItems = [];

    topItems.push(  
        { ratio : 1, template : function() { return instance.campaignFields.element().css( { "padding" : "10px 10px 5px 10px" }) }},
        { ratio : 1, template : function() { return instance.leadActionFields.element().css( { "padding" : "10px 10px 5px 10px" }) }}
    )


    sentTo.append( $("<div>").dxBox( {
        width : "100%",
        items : topItems
    }));

    let bottomItems = [];
    bottomItems.push( 
        { ratio : 1, template : function() { return instance.sentToFields.element().css( { "padding" : "5px 10px 10px 10px" }) }},
        { ratio : 1, template : function() { return instance.leadFields.element().css( { "padding" : "5px 10px 10px 10px" }) }}
    );

    sentTo.append( $("<div>").dxBox( {
        width : "100%",
        items : bottomItems
    }));

    return sentTo;

    

}


LeadEditor.prototype.displayLead = function( leadData ) {

    
    let formDataStore = Fse.Data.newDataSource( { object : "WRK.forms", paginate : false, keyField : "formId" }).store();
    formDataStore.byKey( leadData.formId ).done( function( f ) {

        let form = f; // f[0];

        let formSubmissionDataSource = Fse.Data.newDataSource( { object : "WRK.formSubmission", paginate : false, objectParams : { formId : leadData.formId, submissionId : leadData.submissionId } });
        formSubmissionDataSource.load().done( function( s ) {

            let submission = s;

            console.log( form );
            console.log( form.contactFieldMapping );
            console.log( submission );

            let submissionIndex = {};
            submission.forEach( function( f ) {
                submissionIndex[f.qualifiedField] = f;
            })

            let contactIndex = {};
            for( x in form.contactFieldMapping ) {
                contactIndex[form.contactFieldMapping[x]] = x;
            }

            let lead = [];
            submission.forEach( function( f ) {
                if( ! contactIndex[f.qualifiedField]) {
                    lead.push( f );
                }
            })


            let contact = $.extend( true, {}, form.contactFieldMapping );
            for( cf in contact ) {
                if( submissionIndex[contact[cf]] ) {
                    contact[cf] = submissionIndex[contact[cf]].submissionValue;
                }
            }

            let contactItems = [
                { dataField : "contactFirstName", label : { text : "First Name" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "contactLastName", label : { text : "Last Name" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "contactEmail", label : { text : "Email" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "companyName", label : { text : "Company" }, editorOptions : { placeholder : "not provided" }},
                { dataField : "companyAddress1", label : { text : "Address" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "companyCity", label : { text : "City" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "companyState", label : { text : "State" }, editorOptions : { placeholder : "not provided" } },
                { dataField : "companyZipCode", label : { text : "Zip Code" }, editorOptions : { placeholder : "not provided" } }
            ];

            let leadItems = [];
            lead.forEach( function( l ) {
                leadItems.push( {
                    dataField : l.qualifiedField,
                    label : { text : l.fieldLabel, location : "top" },
                    editorOptions : { placeholder : "no response" }
                })

                let displayValue = l.submissionValue;
                if( l.lookupValues && l.submissionValue ) {
                    let displayValues = [];
                    let submissionValues = l.submissionValue.split( "," );
                    submissionValues.forEach( function( sv ) {
                        l.lookupValues.forEach( function( lv ) {
                            if( lv.value === sv ) {
                                displayValues.push( lv.text );
                            }
                        })
                    })
                    if( displayValues.length ) {
                        displayValue = displayValues.join( "," ); 
                    }
                }

                contact[l.qualifiedField] = displayValue;
            })


            let formConfig = {
                formData : contact,
                colCount : 2,
                readOnly : true,
                items : [
                    { itemType : "group", caption : "Contact", items : contactItems },
                    { itemType : "group", caption : "Response", items : leadItems }
                ]
            }

            $("<div>").dxPopup( {
                title : `Form: ${form.formName}`,
                height : "auto",
                contentTemplate : function() {
                    return $("<div>").dxForm( formConfig );
                },
                onHidden : function( e ) {
                    e.component.element().remove();
                    e.component.dispose();
                }
            }).appendTo( $("body") ).dxPopup("show");

            console.log( formConfig );


        })

    })
};