PartnerNoteEditor = function( options ) {

    this.data = options;
    this.rootElement = null;
    console.log("options/ this.data === ");
    console.log(options);

   this.salutationsList = [
    { "dispValue": "Mr." },
    { "dispValue": "Miss" },
    { "dispValue": "Mrs."},
    { "dispValue": "Dr."}
];


}

PartnerNoteEditor.prototype.constructor = PartnerNoteEditor;

PartnerNoteEditor.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;

}

PartnerNoteEditor.prototype.load = function() {


    let d = $.Deferred();

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

    return d;

}


PartnerNoteEditor.prototype.show = function( editorOptions ) {

    let instance = this;

     instance.partnerContactForm = null;

    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );

    instance.options = $.extend( true, {}, editorOptions );

    let editorTitle = instance.options.contactId ? "Edit Contact" : "Add New Contact";
    instance.options.editorTitle = editorTitle;
    //console.log("options now = ");
    //console.log(instance);

    let isPrimaryContact = false;
    let currprimaryContactId = 0;

    let salutation  = "";
    let firstName = "";
    let lastName = "";
    let preferredCommunication = "";
    let preferredLanguage = "EN";
    let email = "";
    let lastUpdated = "";
    let countryId = 27; //default is USA
    let state = "";
    let city = "";
    let comments = "";
    let fbValue = "";
    let insValue = "";
    let twValue = "";
    let ttValue = "";
    let ytValue = "";
    let phoneValue = "";
    let phoneExtValue = "";
    let contactDecisionValue = false;
    let officeAddrSameValue = "";
    let emailYesNoValue = false;

    if(null != instance.options.data )
    {
     /* if ( typeof instance.options.data.salutation !== 'undefined')
      salutation  = instance.options.data.salutation;*/

      if ( typeof instance.options.data.firstName !== 'undefined')
      firstName  = instance.options.data.firstName;

      if ( typeof instance.options.data.lastName !== 'undefined')
      lastName  = instance.options.data.lastName;

      if ( typeof instance.options.data.prefCommCode !== 'undefined')
      preferredCommunication  = instance.options.data.prefCommCode;

      if ( typeof instance.options.data.preferredLanguage !== 'undefined')
      preferredLanguage  = instance.options.data.preferredLanguage;

      if ( typeof instance.options.data.email !== 'undefined')
      email  = instance.options.data.email;

      if ( typeof instance.options.data.lastUpdated !== 'undefined')
      lastUpdated  = instance.options.data.lastUpdated;

      if ( typeof instance.options.data.countryId !== 'undefined')
      countryId  = instance.options.data.countryId;

      if ( typeof instance.options.data.state !== 'undefined')
      state  = instance.options.data.state;

      if ( typeof instance.options.data.city !== 'undefined')
      city  = instance.options.data.city;

      if ( typeof instance.options.data.comments !== 'undefined')
      comments  = instance.options.data.comments;

      if ( typeof instance.options.data.facebook !== 'undefined')
      fbValue  = instance.options.data.facebook;
      if ( typeof instance.options.data.instagram !== 'undefined')
      insValue  = instance.options.data.instagram;
      if ( typeof instance.options.data.twitter !== 'undefined')
      twValue  = instance.options.data.twitter;
      if ( typeof instance.options.data.tiktok !== 'undefined')
      ttValue  = instance.options.data.tiktok;
      if ( typeof instance.options.data.youtube !== 'undefined')
      ytValue  = instance.options.data.youtube;
      if ( typeof instance.options.data.phone !== 'undefined')
      phoneValue  = instance.options.data.phone;
      if ( typeof instance.options.data.phoneExt !== 'undefined')
      phoneExtValue  = instance.options.data.phoneExt;

      if ( typeof instance.options.data.currPrimaryContactId !== 'undefined')
      currprimaryContactId  = instance.options.data.currPrimaryContactId;

      if (instance.options.data.primaryContactId == 'Yes')
      isPrimaryContact = true;

      if ( typeof instance.options.data.contactDecisionMaker !== 'undefined')
      {
        
        if (instance.options.data.contactDecisionMaker =='Yes')
          contactDecisionValue = true;
        else
          contactDecisionValue = false;
      }

      if ( typeof instance.options.data.officeAddrSame !== 'undefined')
      {
        
        if (instance.options.data.officeAddrSame == 'Yes')
        officeAddrSameValue = true;
        else
        officeAddrSameValue = false;

        //alert(officeAddrSameValue);
      }

      

      
      if ( typeof instance.options.data.emailYesNo !== 'undefined')
      {
        
        if (instance.options.data.emailYesNo == 'Yes')
        emailYesNoValue = false;
        else
        emailYesNoValue = true;

      // alert("emailYesNoValue" +emailYesNoValue);
      }
           
    }


    let validURLPattern = /^https?:\/\/([-\w\.]+)+(:\d+)?(:\w+)?(@\d+)?(@\w+)?([-\w\.]+)(\/([\w\/_\.]*(\?\S+)?)?)?/i;

     
  instance.partnerContactForm = $("<div>").dxForm( {
        formData : instance.options.data,
        readOnly : false,
        validationGroup : "savePartnerContactForm",
        showValidationSummary : true,
        items : [
            { itemType : "group", 
            name : "general",
            caption : "General",
             items : [
                 {
        
                  label : { location : "left", text : "Operator Contact", visible: true  },
                  name : "operatorContact",
                  
                  template : function( options, itemElement ) {
        
                     /* let salutationSelectBox = $("<div>").dxSelectBox( {
                        width : 80,
                        labelMode: 'hidden',
                        showClearButton : true,
                        value : salutation,
                        dataSource: instance.salutationsList,
                        displayExpr: "dispValue",
                        valueExpr : "dispValue",
                       // validationGroup : options.component.option( "validationGroup" ),
                        onValueChanged : function( e ) {
                          options.component.updateData( "salutation", e.value );
                      }
                      }).css( { "display" : "inline-block" } );
                      

                      salutationSelectBox.dxValidator( {
                        validationGroup : options.component.option( "validationGroup" ),
                        validationRules : [ { type : "required", message : "Salutation is required" } ]
                    })*/
                   
        
                      let firstNameTextBox = $("<div>").dxTextBox( {
                          width : 150,
                          value : firstName,
                          //name : "firstName",
                          labelMode: 'hidden',
                          placeholder : "first name",
                          hoverStateEnabled : true,
                          //validationGroup : options.component.option( "validationGroup" ),
                          onValueChanged : function( e ) {
                            options.component.updateData( "firstName", e.value );
                        }
                      }).css( { "display" : "inline-block", "margin-left" : "8px" } );

                      firstNameTextBox.dxValidator( {
                        validationGroup : options.component.option( "validationGroup" ),
                        validationRules : [ { type : "required", message : "First Name is required" } ]
                    })

                    
        
                      let lastNameTextBox = $("<div>").dxTextBox( {
                        width : 150,
                        value : lastName,
                        labelMode: 'hidden',
                        placeholder : "last name",
                        //validationGroup : options.component.option( "validationGroup" ),
                        onValueChanged : function( e ) {
                          options.component.updateData( "lastName", e.value );
                      }
                    }).css( { "display" : "inline-block", "margin-left" : "8px"  } ); 

                    lastNameTextBox.dxValidator( {
                      validationGroup : options.component.option( "validationGroup" ),
                      validationRules : [ { type : "required", message : "Last Name is required" } ]
                  })


                    let primaryContactCheckBox = $("<div>").dxCheckBox( {
                      text: "Check here to make this the primary contact",
                      value: isPrimaryContact,
                      name: "primaryContactId",
                      onValueChanged: function (e) {
                        //const previousValue = e.previousValue;
                        //const newValue = e.value;
                       

                        options.component.updateData( "primaryContactId", e.value );
                       
                    }
                    }).css( { "display" : "block", "margin-left" : "8px"  } ); 
        
                    let decisionMakerContactCheckBox = $("<div>").dxCheckBox( {
                      text: "Check here if this contact has decision making authority",
                      value: contactDecisionValue,
                      name: "contactDecisionMaker",
                      dataField : "contactDecisionMaker",
                      onValueChanged: function (e) {
                        //const previousValue = e.previousValue;
                        
                        options.component.updateData( "contactDecisionMaker", e.value );
                       
                    }
                    }).css( { "display" : "block", "margin-left" : "8px"  } ); 
        
        
                      itemElement.append( firstNameTextBox ).append( lastNameTextBox )
                      .append(primaryContactCheckBox).append(decisionMakerContactCheckBox);

                      //firstNameTextBox.focus();
                     
        
                  }
        
              },
                {
                  dataField : "relationshipRank",
                  label : { text : "Relationship Rank" },
                  editorType : "dxSelectBox",
                  editorOptions : {
                      dataSource : Fse.Data.newDataSource( { object : "CRM.contactRelationshipRanks", keyField : "caRelationshipRank" } ),
                      displayExpr : "caRelationshipRankText",
                      valueExpr : "caRelationshipRank",
                      searchEnabled : true,
                      searchExpr : "caRelationshipRankText",
                      searchMethod : "startswith",
                      showClearButton : true,
                      width : 150
                  }
              },
                {
                  dataField : "jobFunctionId",
                  label : { text : "Primary Job Function" },
                  editorType : "dxSelectBox",
                  editorOptions : {
                      dataSource : Fse.Data.newDataSource( { object : "CRM.contactJobFunctions", keyField : "caJobFunction", objectParams : { partnerTypes : instance.data.partnerType } } ),
                      displayExpr : "caJobFunctionText",
                      valueExpr : "caJobFunction",
                      searchEnabled : true,
                      searchExpr : "caJobFunctionText",
                      searchMethod : "startswith",
                      showClearButton : true,
                      width : 150
                  },
                  validationRules : [ 
                      { type : "required",
                      message: 'Job Function is required',
                       /*reevaluate : true,  
                       message : "Job Function is required", 
                          validationCallback : function( v ) {
                             return instance.contactFieldValidationCallback( v );
                          }*/
                      }
                  ]
              },
               
               
                { dataField : "title", label : { text : "Contact Title" }, editorOptions : { placeholder : "not provided" } },

               {
                label : { location : "left", text : "Email Address", visible: true  },
                template : function( options, itemElement ) {

                  let emailTextBox = $("<div>").dxTextBox( {
                    value : email,
                    labelMode: 'hidden',
                    placeholder : "email",
                    maxLength : 75,
                    //width : 200,
                    onValueChanged : function( e ) {
                      options.component.updateData( "email", e.value );
                  }
                }).css( { "display" : "block"  } ); 

                emailTextBox.dxValidator( {
                  validationGroup : options.component.option( "validationGroup" ),
                  validationRules : [ {
                    type: 'required',
                    message: 'Email is required',
                  },
                  {
                    type: 'email',
                    message: 'Email is invalid',
                  } ]
              })

                  let suppressMktCheckBox = $("<div>").dxCheckBox( {
                    text: "Check here to suppress Marketing Emails",
                    value: emailYesNoValue,
                    name: "emailYesNo",
                    onValueChanged: function (e) {
                      //const previousValue = e.previousValue;
                      let newValue = e.value;
                      newValue = !newValue;

                     // alert(newValue);
                    
                      options.component.updateData( "emailYesNo", newValue );
                     
                  }
                  }).css( { "display" : "block", "margin-left" : "8px"  } ); 
                   itemElement.append( emailTextBox ).append( suppressMktCheckBox );

                }
              },
              { dataField : "linkedin", label : { text : "LinkedIn"}, maxLength : 150, placeholder : "url", validationRules : [ { type : "pattern", message : "Invalid URL", pattern : validURLPattern }] },
                
              { label : { text : "Phone" },

                template : function( options, itemElement ) {
                let phoneTextBox = $("<div>").dxTextBox( {
                  width : 100,
                  maxLength : 30,
                  value : phoneValue,
                  mask: "000-000-0000",
                  //maskChar: "‒",
                  onValueChanged : function( e ) {
                      options.component.updateData( "phone", e.value );
                  }
              }).css( { "display" : "inline-block" } ).dxTextBox( "instance" );

              //customEditors.phone = phoneTextBox;

              itemElement.append( phoneTextBox.element() )

              let phoneExtTextBox = $("<div>").dxTextBox( {
                  width : 50,
                  maxLength : 10,
                  value : phoneExtValue,
                  onValueChanged : function( e ) {
                      options.component.updateData( "phoneExt", e.value );
                  }
              }).css( { "display" : "inline-block" } ).dxTextBox( "instance" );

             

              itemElement
              .append( $("<span>").text( "Ext." ).css( { "padding-left" : "8px", "padding-right" : "8px" }) )
              .append( phoneExtTextBox.element() );
            }},
            
                
                { dataField : "cell", label : { text : "Cell" }, 
                editorOptions : { 
                  width : 100,
                  placeholder : "not provided", 
                  maxLength : 10,
                  mask: "000-000-0000",
                 // maskChar: "‒" 
                },
                validationRules : [
                  {type: 'pattern',
                  pattern: '^[0-9]+$'}
                ]},
               
                { itemType : "group",
                            items : internetItems
                        
                },
                /*{ dataField : "fax", label : { text : "Fax" },
                 editorOptions : { 
                  placeholder : "not provided",
                  mask: "000-000-0000",
                  maskChar: "‒" }
                },*/
        
                { dataField : "prefCommCode",
                 label : { text : "Preferred Communication" }, 
                 editorType: 'dxSelectBox',
                 editorOptions: {
                  dataSource: instance.prefCommList,
                        displayExpr: "dispValue",
                        valueExpr : "value",
                        placeholder : "--No Preference--",
                   searchEnabled: true,
                   value: preferredCommunication,
                   onValueChanged : function( e ) {
                    //options.component.updateData( "preferredCommunication", e.value );
                     }
                 }        
                },
                { dataField : "preferredLanguage", 
                label : { text : "Preferred Language" },
                 editorType: 'dxSelectBox',
                 editorOptions: {
                  dataSource : Fse.Data.newDataSource( { object : "CRM.languages", keyField : "languageCode" } ),
                  displayExpr : "languageName",
                  valueExpr : "languageCode",
                  searchEnabled : true,
                  searchExpr : "languageName",
                  searchMethod : "startswith",
                  showClearButton : true,
                  value: preferredLanguage,
                 } 
                
                },
        
                // check box to use company address
                {
                  dataField : "officeAddrSame", label : { text : "Use company address" },
                  editorType : 'dxCheckBox',
                  value: officeAddrSameValue,
                  editorOptions : {
                   
                    onValueChanged: function (e) {
                      const previousValue = e.previousValue;
                      const newValue = e.value;
                     // console.log("newValue");
                      //console.log(newValue);
                      //disable the the following address fields
                     // options.component.updateData( "officeAddrSame", e.value );
                      instance.partnerContactForm.itemOption('general.HomeAddress', 'visible', previousValue);
                      //instance.partnerContactForm.getEditor('address1').option('readOnly', newValue);
                      
                  }
                  }
                },
               {
                  itemType: 'group',
                  name: 'HomeAddress',
                  visible : !officeAddrSameValue,
                  caption : '',
                  items: [
                    { dataField : "address1", label : { text : "Street 1" }, editorOptions : { placeholder : "not provided" }},
                    { dataField : "address2", label : { text : "Street 2" }, editorOptions : { placeholder : "not provided" }},

                    {
                      dataField : "countryId", label : { text : "Country" },
                      editorType : "dxSelectBox", editorOptions : {
                          dataSource : Fse.Data.newDataSource( { object : "UT.countries", keyField : "countryId" } ),
                          value : countryId, 
                          displayExpr : "countryAbbrev",
                          valueExpr : "countryId",
                          width : 80
                      },
                     // validationGroup : "savePartnerContactForm", 
                     validationRules: [{
                      type: 'required',
                      message: 'Country is required',
                    }],
                  },

                /*  {
                    label : {location : "left", text : "Country"},
                    dataField : "countryId",
                    template : function(options, itemElement) {

                      let countrySelectBox = $("<div>").dxSelectBox( {
                        dataSource : Fse.Data.newDataSource( { object : "UT.countries", keyField : "countryId" } ),
                          value : countryId, 
                          displayExpr : "countryAbbrev",
                          valueExpr : "countryId",
                          width : 80
                    }).dxSelectBox( "instance" ); 

                    countrySelectBox.element().dxValidator( {
                      //validationGroup : "savePartnerContactForm",
                      validationRules : [ { type : "required", message : "Country is required" } ]
                  })

                  itemElement.append( countrySelectBox.element().css( { "display" : "inline-block" } ) )
                    
                }
               },*/
                   
                  {
            
                    label : { location : "left", text : "City/State/Prov" },
                    name : "cityState",
                    template : function( options, itemElement ) {
            
                        let cityTextBox = $("<div>").dxTextBox( {
                            width : 150,
                            placeholder : "city",
                            value : city,
                            onValueChanged : function( e ) {
                                options.component.updateData( "city", e.value );
                            }
                            , onEnterKey : function( e ) {
                                //instance.search1FS();
                            }
            
                        }).css( { "display" : "inline-block" } );
          
            
                        let stateSelectBox = $("<div>").dxSelectBox( {
                            width : 80,
                            dataSource : Fse.Data.newDataSource( { object : "UT.states", keyField : "state", objectParams : { countryId : 27 } } ),
                            placeholder : "state",
                            displayExpr : "state",
                            valueExpr : "state",
                            searchEnabled : true,
                            searchExpr : "state",
                            value : state,
                            searchMethod : "startswith",
                            showClearButton : true,
                            validationGroup : options.component.option( "validationGroup" ),
                            onValueChanged : function( e ) {
                                options.component.updateData( "state", e.value );
                            }
                            , onEnterKey : function( e ) {
                               // instance.search1FS();
                            }
                        }).css( { "display" : "inline-block", "margin-left" : "8px" } );
            
                        itemElement.append( cityTextBox ).append( "," ).append( stateSelectBox ); //.append( zipCodeTextBox )
            
                    }
                  },
                    { name : "zipcode",
                    dataField : "zipcode",
                    label : { text : "Zip Code" }, editorType: 'dxTextBox',
                  
                    editorOptions :{
                      width : 80,
                      placeholder : "zipcode",
                      
                            onValueChanged : function( e ) {
                               // options.component.updateData( "zipcode", e.value );
                            }
                            , onEnterKey : function( e ) {
                               // instance.search1FS();
                            }
                    }
                  }
                ]},
        
              {  label : { text : "Internal Comments"},  
              dataField : "comments",
              editorType : "dxTextArea", 
        
              editorOptions :{
                  colSpan: 2,
                  width : 300, 
                  height: 90,
                  maxLength: 500,
                 // value : comments,
                  placeholder : "Comments",
                 // valueChangeEvent: 'keyup',
                /*  onValueChanged(data) {
                    //console.log(data);
                    //instance.partnerContactForm.itemOption('address', 'disabled', newValue);
                   // instance.partnerContactForm.itemOption('general.HomeAddress', 'visible', previousValue);
                      //instance.partnerContactForm.getEditor('address1').option('readOnly', newValue);
                    var length = data.value.length;  
                    commentsAreaCharacter.option('value', `${length + '/100'}`);
                  },
                 
                 /* onKeyDown : function( e ) {
                    var length = e.value.length;  
                    console.log(length);
                    commentsAreaCharacter.dxTextArea("option", "value",`${length + '/100'}`); //option('text', `${length + '/100'}`);
                    //commentsAreaCharacter.text(length + '/100');  
                    //element.dxSelectBox("option", "value",items[0].Reason);		
                      options.component.updateData( "internalComments", e.value );
                  }*/
                }
             
            },
        
                { 
                label : { text : "Last Updated" },
                template : function( options, itemElement ) {
        
                  const lastUpdatedText = $("<div>").dxDateBox( {
                    readOnly: true,
                    useMaskBehavior: true,
                    displayFormat: 'MMM d, yyyy hh:mm a',
                    value: lastUpdated,
                    hoverStateEnabled: false,
                    onValueChanged : function( e ) {
                      options.component.updateData( "lastUpdated", e.value );
                  }
                }).css( { "display" : "block", "border" : "none" } );

                itemElement.append( lastUpdatedText );
                
              }
               
            
            }]
          }]
           
        }).dxForm( "instance" );

    let submitButton = $("<div>").dxButton( {
      text : "Save",
      type : "default",
      validationGroup: "savePartnerContactForm",
      onClick : function( be ) {

        var result = be.validationGroup.validate();
        if (result.isValid) 
        {
          savePartnerContact();
        }
        
      }
  }).dxButton( "instance" );

    let popupToolbarItems = [
      { toolbar : "bottom", location : "after", widget : "dxButton", 
          options : {
              text : "Cancel", 
              type : "normal", 
              onClick : function( be ) {
                  if( confirm( "Are you sure?" )) {
                    instance.popup.hide();      
                  }
              }
          }
      },
      { toolbar : "bottom", location : "after", template : function() { 
              return submitButton.element();
          }
      }
  ];



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

        title : instance.options.editorTitle,
        height : 600,
        width: "auto",
        hideOnOutsideClick : true,
        toolbarItems : popupToolbarItems,

        contentTemplate : function() {

          return $("<div>").append( instance.partnerContactForm.element() );
        },

        onShown: function (e) {
         // console.log(instance.partnerContactForm.getEditor('operatorContact'));
      },

        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
           // console.log(instance);
        }
    }).dxPopup( "instance" ); 

   
    instance.popup.element().appendTo( "body" );
    instance.popup.show();



    let savePartnerContact= function() {

      console.log("in save");
      console.log(instance);

      let dataToSend = $.extend( true, {}, instance.partnerContactForm.option( "formData" ) );
      // TODO - get this to protect the page until the load operation is complete
      let loadPanel = $("<div>").dxLoadPanel( {
        message : "Working...",
        deplay : 0,
        hideOnOutsideClick : false,
        hideOnParentScroll : false,
        container : instance.popup.element(),
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).appendTo( $("body") ).dxLoadPanel( "instance" );

      // if any of the contact fields have been added, then we are going to add a contact
      dataToSend.addContact = true;
      dataToSend.partnerType = instance.data.partnerType;
      dataToSend.partnerId = instance.data.partnerId;
    
      if(typeof dataToSend.fspro_userId !== 'undefined')
      {
        dataToSend.addContact = false;
        
      }
    //  console.log("dataToSend--- ");
     // console.log(dataToSend);

      loadPanel.show();
      Fse.Ajax.performAction( {
          object : "CRM.savePartnerContact", 
          data : dataToSend
      }).done( function( addpartnerResult ) {
       // console.log("output = ");
       // console.log(addpartnerResult);
        
        instance.options.onSuccess(addpartnerResult);

      }).then( function() {
          loadPanel.hide();
         instance.popup.hide();
      });

    
  
 
}
}