/*
****************************************************************************
Component Name     : FieldMappingChild
Created Date       : 17/4/2024
@description       :  This component is responsible for managing the changes made in 
                      Salesforce and Shopify fields. 

@author            : SME Team
Modification Log:
Ver   Date         Author                            
1.0   23/4/2024   SME Team                         
****************************************************************************
*/

import { LightningElement, api, wire, track } from 'lwc';

// SHOW TOAST
import { ShowToastEvent } from "lightning/platformShowToastEvent";

//Custom Labels
import Field_Mapping from '@salesforce/label/c.Field_Mapping';
import default_mapping from '@salesforce/label/c.default_mapping';
import Salesforce from '@salesforce/label/c.Salesforce';
import DEFAULT from '@salesforce/label/c.DEFAULT';
import Shopify from '@salesforce/label/c.Shopify';
import REQUIRED_FIELDS from '@salesforce/label/c.REQUIRED_FIELDS';
import DATA_TYPE from '@salesforce/label/c.DATA_TYPE';
import SELECT_FIELDS from '@salesforce/label/c.SELECT_FIELDS';
import This_field_is_Required from '@salesforce/label/c.This_field_is_Required';
import OPTIONAL_FIELDS from '@salesforce/label/c.OPTIONAL_FIELDS';
import ACTION from '@salesforce/label/c.ACTION';
import Close from '@salesforce/label/c.Close';
import Select_Multiple_Fields from '@salesforce/label/c.Select_Multiple_Fields';
import Error from '@salesforce/label/c.Error';
import Field_Already_Selected from '@salesforce/label/c.Field_Already_Selected';
import Multiple_Fields from '@salesforce/label/c.Multiple_Fields';
import Add_Row from '@salesforce/label/c.Add_Row';
import SELECT_ANY_SHOPIFY_FIELD from '@salesforce/label/c.SELECT_ANY_SHOPIFY_FIELD';
import SELECT_ANY_SALESFORCE_FIELD from '@salesforce/label/c.SELECT_ANY_SALESFORCE_FIELD';
import Opportunity from '@salesforce/label/c.Opportunity';
import Select_value from '@salesforce/label/c.Select_value';
import SELECT_PARENT from '@salesforce/label/c.SELECT_PARENT';
import Select_Options from '@salesforce/label/c.Select_Options';
import Cancel from '@salesforce/label/c.Cancel';
import Shopify_Fields from '@salesforce/label/c.Shopify_Fields';
import Available from '@salesforce/label/c.Available';
import Selected from '@salesforce/label/c.Selected';
import Select_the_fields_you_want_to_merge from '@salesforce/label/c.Select_the_fields_you_want_to_merge';
import Apply_and_Close from '@salesforce/label/c.Apply_and_Close';
import Enter_a_value from '@salesforce/label/c.Enter_a_value';


export default class FieldMappingChild extends LightningElement {

  // Custom in-component toast state (replaces ShowToastEvent) — see showNotification.
  @track toasts = [];
  _toastSeq = 0;

// GLOBAL VARIABLES
@api storeName = '';
@api iconName = '';
@api objectName = '';
@api objectApiName = '';
@api defaultMapping = '';
@api shopifyFields = '';
@api salesforceFields = '';
@api requiredMapping = '';
@api CurrencyIsoCode = 'USD';
@api nullValues = [];
@api useDefault = false;
@api getIndexValue;
@api openTable = false;
@api specifyCloseDate = false;

// ── Icon selection ───────────────────────────────────────────────────────
// LWC templates are compiled, so raw SVG markup cannot be bound in from a JS
// string. Instead the template switches on these getters and renders the
// matching inline <svg>. objectApiName is already passed down by
// fieldMappingParent, so no new @api property was needed.
// The SVGs use fill="none" + stroke="currentColor", so they inherit the
// green from .iconColor -- one CSS change recolours every icon.
get isProduct()        { return this.objectApiName === 'Product2'; }
get isVariant()        { return this.objectApiName === 'HIC_ShopifySync__Variant__c'; }
get isAccount()        { return this.objectApiName === 'Account' || this.objectApiName === 'PersonAccount'; }
get isContact()        { return this.objectApiName === 'Contact'; }
get isDraftOrder()     { return this.objectApiName === 'DraftOrder'; }
get isDraftOrderItem() { return this.objectApiName === 'DraftOrderItem'; }
get isOrder()          { return this.objectApiName === 'Order'; }
get isOrderItem()      { return this.objectApiName === 'OrderItem'; }
get isOpportunity()    { return this.objectApiName === 'Opportunity'; }
get isOppLineItem()    { return this.objectApiName === 'OpportunityLineItem'; }

// LOCAL VARIABLES
@track defaultMappingList = [];
@track objectFieldMapping = [];
@track requiredFieldMapping = [];
@track mergeFieldMapping = new Map();
@track shopifyFieldsOptions = [];
@track requiredFieldsOptions = [];
@track mergeFieldList = [];
@track nestedFieldList = [];
@track nestedComboboxValue='';
@track selectedCheckboxField = 'false';
@track filteredShopifyOptions = [];
@track requiredFieldOptions = [];
@track salesforceFieldsOptions = [];
@track salesforceSelectedFieldOptions = [];
@track openErrorModel = false;
index = 0;
rIndex = 1;
@track displayMultiSelectLayout = false;
@track openMultiSelectField = false;
@track showMergeFieldList = false;
@track indexId;
@track tableType = '';
hasDefault = false;
hasRequired = false;
hasOptional = false;
disabledAddRow = false;
@track selectedDataType;
@track storeDeleteCustomSettingRecords = [];

// used for the dual listbox
@track selectedValues =[];
@track mergeFields = [];
@track shopifyPillsMap = {};
//Lists Containing Data Types
@track stringList = [];
@track phoneList = [];
@track numberList = [];
@track booleanList = [];
@track dateTimeList = [];
@track urlList = [];

  //Custom Labels
  @track label = {
    Field_Mapping , default_mapping , Salesforce , DEFAULT , Shopify , REQUIRED_FIELDS , DATA_TYPE , SELECT_FIELDS ,
    This_field_is_Required , OPTIONAL_FIELDS , ACTION , Close , Select_Multiple_Fields , Error , Field_Already_Selected ,
    Multiple_Fields , Add_Row , SELECT_ANY_SHOPIFY_FIELD , SELECT_ANY_SALESFORCE_FIELD , Opportunity , Select_value , SELECT_PARENT ,
    Select_Options , Cancel , Shopify_Fields , Available , Selected , Select_the_fields_you_want_to_merge , Apply_and_Close , Enter_a_value
};

  //Connected Callback 
  connectedCallback() {
    console.log('SYNC MADE EASY: Field Mapping Child Connected Callback');
    /* 
    * Salesforce fields Options for Over all component
    *
    * */
    if (this.requiredMapping && this.requiredMapping != "null") {
      this.hasOptional = true;
      for (let salesforce of JSON.parse(this.requiredMapping)) {
        if (salesforce.dataType != 'REFERENCE') {
          this.requiredFieldsOptions.push({
            label: salesforce.filedlabel,
            value: salesforce.filedApiName,
            dataType: salesforce.dataType,
            ...salesforce
          });
        }
      }
    }

    /* 
    * Salesforce fields Options for Over all component
    *
    * */
    if (this.salesforceFields && this.salesforceFields != "null") {
      this.hasOptional = true;
      for (let salesforce of JSON.parse(this.salesforceFields)) {
        if (salesforce.dataType != 'REFERENCE') {
          if(salesforce.filedApiName === 'IsActive'){
            salesforce.filedApiName = 'isActive';
          }
          this.salesforceFieldsOptions.push({
            label: salesforce.filedlabel,
            value: salesforce.filedApiName,
            dataType: salesforce.dataType,
            ...salesforce
          });
        }
      }
    }
    
    /* 
    * Shopify fields Options for Over all component
    *
    * */
    if (this.shopifyFields && this.shopifyFields != 'Null') {

      for (let shopify of JSON.parse(this.shopifyFields)) {

        if (shopify.Name && shopify.HIC_ShopifySync__Field_Name__c) {
          if (shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'TEXTAREA'|| shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'STRING' || shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'LONG TEXT AREA') {
            this.stringList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          } else if (shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'INTEGER' || shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'NUMBER' || shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'DOUBLE' || shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'CURRENCY') {
            this.numberList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          } else if (shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'PHONE') {
            this.phoneList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          } else if (shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'DATETIME' || shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'DATE') { 
            this.dateTimeList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          } else if (shopify.HIC_ShopifySync__Data_Type__c.toUpperCase() == 'BOOLEAN') {
            this.booleanList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          } else {
            this.urlList.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
          }
           this.shopifyFieldsOptions.push({ label: shopify.HIC_ShopifySync__UI_Label_Name__c, value: shopify.Name, dataType: shopify.HIC_ShopifySync__Data_Type__c, ...shopify });
        }
      }
    }

    if (this.defaultMapping && this.defaultMapping != "Null" && JSON.parse(this.defaultMapping).length > 0) {
      this.hasDefault = true;
      let objectIndex = 1;
      for (let defaultMap of JSON.parse(this.defaultMapping)) {
        let shopifyNested = null;
        if (defaultMap.hasOwnProperty('HIC_ShopifySync__Nested__c')) {
          shopifyNested = defaultMap.HIC_ShopifySync__Nested__c;
        }
        let flag = false;
        if (defaultMap.hasOwnProperty('HIC_ShopifySync__Shopify_Fields__c') && defaultMap.HIC_ShopifySync__Shopify_Fields__c.includes(',')) {
          flag = true;
        }
        let shopifyOptions = [];
        let selectedfields;
        if ( defaultMap.hasOwnProperty('HIC_ShopifySync__Shopify_Field_Type__c') && defaultMap.HIC_ShopifySync__Shopify_Field_Type__c.toUpperCase() === 'BOOLEAN' && defaultMap.HIC_ShopifySync__Shopify_Fields__c) {
          if (defaultMap.HIC_ShopifySync__Shopify_Fields__c.toUpperCase() === 'TRUE') {
            selectedfields = true;
          } else if(defaultMap.HIC_ShopifySync__Shopify_Fields__c.toUpperCase() === 'FALSE'){
            selectedfields = false;
          } else{
            selectedfields = defaultMap.HIC_ShopifySync__Shopify_Fields__c ?? '';
          }
          
        } else {
          selectedfields = defaultMap.HIC_ShopifySync__Shopify_Fields__c ?? '';
        }

        // GET SALESFORCE FIELD LABEL FOR DEFAULT MAPPING 
        let defaultSalesforceFieldLabel ;
        if (defaultMap.HIC_ShopifySync__SF_Field__c){
          defaultSalesforceFieldLabel = this.salesforceFieldsOptions.filter((obj) => obj.value.toUpperCase() === defaultMap.HIC_ShopifySync__SF_Field__c.toUpperCase())[0]?.label || this.requiredFieldsOptions.filter((obj) => obj.value.toUpperCase() === defaultMap.HIC_ShopifySync__SF_Field__c.toUpperCase())[0]?.label || defaultMap.HIC_ShopifySync__SF_Field__c;
        }
        let graphqlfield = null;
        if(defaultMap.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
          graphqlfield  = defaultMap.HIC_ShopifySync__GQL_Field_API__c;
        }
       if (defaultMap.HIC_ShopifySync__SF_Field__c) {
            this.defaultMappingList.push({
            Id: objectIndex++, 
            salesforceId: defaultMap.Id,
            salesforcefields: defaultMap.HIC_ShopifySync__SF_Field__c, salesforceFieldLabel: defaultMap.HIC_ShopifySync__SF_Field__c,
            salesforceFieldType: defaultMap.HIC_ShopifySync__SF_Field_Type__c, defaultValue: defaultMap.HIC_ShopifySync__Default_Value__c,
            selectedfields: selectedfields,
            graphqlfield : graphqlfield,
            shopifyFieldName: defaultMap.HIC_ShopifySync__Shopify_Fields__c?? '', 
            shopifyApiName:defaultMap.Name,
            shopifyFieldType: defaultMap.HIC_ShopifySync__Shopify_Field_Type__c, flag: flag, shopifyNested: shopifyNested,
            shopifyOptions: shopifyOptions, displayMultiSelectLayout: flag,
            CurrencyIsoCode: this.CurrencyIsoCode, 
            HIC_ShopifySync__IsSFID: false, 
            HIC_ShopifySync__Store: this.storeName,
            showRecords:true,
            sobjectType: this.getObjectApiName(this.objectApiName, defaultMap.HIC_ShopifySync__SF_Field__c), 
            HIC_ShopifySync__External_ID: this.getObjectApiName(this.objectApiName, defaultMap.HIC_ShopifySync__SF_Field__c) + '-' + defaultMap.HIC_ShopifySync__SF_Field__c,
            HIC_ShopifySync__Store_External_ID: this.storeName + this.getObjectApiName(this.objectApiName, defaultMap.HIC_ShopifySync__SF_Field__c) + '-' + defaultMap.HIC_ShopifySync__SF_Field__c,
            disabledSalesforceCombobox: true, disabledShopifyCombobox: false,
            canAccessMergeFields: true,
            defaultCheckboxDisabled: true,
            dataTypeInput: defaultMap.HIC_ShopifySync__Shopify_Field_Type__c,
            defaultSalesforceFieldLabel:defaultSalesforceFieldLabel,
            newOrEditedFields: false
          });
        }
      }
    }

   
    // Merge Fields options values 
    this.mergeFieldList = this.shopifyFieldsOptions;

    /* Shopify fields creation of list that has to be differentiated on the basis of the Data Types */
    if (this.shopifyFields && this.shopifyFields != 'Null') {
      let optionIndex = 1;
      let requiredIndex = 1;
      for (let defaultMap of this.defaultMappingList) {
        let showRecords = true;
        if (defaultMap.hasOwnProperty('salesforceFieldType') && defaultMap.salesforceFieldType !== null && defaultMap.salesforceFieldType !== undefined) {        
          if (defaultMap.salesforceFieldType.toUpperCase() == 'REFERENCE') {
            showRecords = false;            
          }
        }
        
        let selectedfields = '';
        let exactMatch = false;
        let graphqlfield = '';

        /**
         * THIS CHANGE WAS MADE TO CHECK THE REPEATING VALUE OF THE FIELD MAPPING
         */
        
        this.shopifyFieldsOptions.map((obj) => {
          if (exactMatch === false) {

            // CHECK IF DEFAULT CHECKBOX IS SELECTED 
            if(defaultMap.defaultValue){
              selectedfields = defaultMap.selectedfields;
            }
            else if (defaultMap.selectedfields !== true && defaultMap.selectedfields !== false && defaultMap.selectedfields !== null && defaultMap.selectedfields !== undefined) {
              if (defaultMap.shopifyFieldName !== true && defaultMap.shopifyFieldName !== false && !defaultMap.shopifyFieldName.includes(',') && obj.hasOwnProperty('HIC_ShopifySync__Field_Name__c') && defaultMap.selectedfields.toUpperCase() === obj.HIC_ShopifySync__Field_Name__c.toUpperCase() && !defaultMap.shopifyNested && !obj.hasOwnProperty('HIC_ShopifySync__Nested__c')) {
                selectedfields = obj.Name;
                exactMatch = true;
                if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  graphqlfield = obj.HIC_ShopifySync__GQL_Field_API__c;
                }

              } else if (defaultMap.shopifyFieldName !== true && defaultMap.shopifyFieldName !== false && !defaultMap.shopifyFieldName.includes(',') && obj.hasOwnProperty('HIC_ShopifySync__Field_Name__c') && defaultMap.selectedfields.toUpperCase().includes(obj.HIC_ShopifySync__Field_Name__c.toUpperCase()) && !defaultMap.shopifyNested) { 
                selectedfields = obj.Name;
                if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  graphqlfield = obj.HIC_ShopifySync__GQL_Field_API__c;
                }
                
              }else if (defaultMap.shopifyFieldName !== true && defaultMap.shopifyFieldName !== false && !defaultMap.shopifyFieldName.includes(',') && obj.hasOwnProperty('HIC_ShopifySync__Field_Name__c') && defaultMap.shopifyNested
                && defaultMap.selectedfields.toUpperCase() === obj.HIC_ShopifySync__Field_Name__c.toUpperCase() && obj.hasOwnProperty('HIC_ShopifySync__Nested__c')
                && defaultMap.shopifyNested.toUpperCase() === obj.HIC_ShopifySync__Nested__c.toUpperCase()) {
                selectedfields = obj.Name;
                exactMatch = true;
                if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  graphqlfield = obj.HIC_ShopifySync__GQL_Field_API__c;
                }

              }else if (defaultMap.shopifyFieldName !== true && defaultMap.shopifyFieldName !== false && !defaultMap.shopifyFieldName.includes(',') && obj.hasOwnProperty('HIC_ShopifySync__Field_Name__c') && defaultMap.shopifyNested
                && defaultMap.selectedfields.toUpperCase().includes(obj.HIC_ShopifySync__Field_Name__c.toUpperCase()) && obj.hasOwnProperty('HIC_ShopifySync__Nested__c')
                && defaultMap.shopifyNested.toUpperCase().includes(obj.HIC_ShopifySync__Nested__c.toUpperCase())) {
                selectedfields = obj.Name;
                if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  graphqlfield = obj.HIC_ShopifySync__GQL_Field_API__c;
                }
                
              } else if (defaultMap.shopifyFieldName !== true && defaultMap.shopifyFieldName !== false && defaultMap.shopifyFieldName.includes(',') && obj.hasOwnProperty('HIC_ShopifySync__Field_Name__c')) {
                let fieldName = [];
                fieldName = defaultMap.shopifyFieldName.split(',');
                if (fieldName.includes(obj.HIC_ShopifySync__Field_Name__c) && !selectedfields.includes(obj.HIC_ShopifySync__Field_Name__c)) {
                  if (selectedfields == '') {
                    selectedfields += obj.HIC_ShopifySync__UI_Label_Name__c;
                    if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                      graphqlfield += obj.HIC_ShopifySync__GQL_Field_API__c;
                    }
                  } else {
                    selectedfields += ',' + obj.HIC_ShopifySync__UI_Label_Name__c;
                    if(obj.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                      graphqlfield += ',' + obj.HIC_ShopifySync__GQL_Field_API__c;
                    }
                  }
                }
                
               
              }
              else if(defaultMap.defaultValue){
                selectedfields = defaultMap.shopifyFieldName;
                if(defaultMap.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  graphqlfield =  defaultMap.HIC_ShopifySync__GQL_Field_API__c;
                }
              } 
              
            } else {
              selectedfields = defaultMap.selectedfields;
              if(defaultMap.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                graphqlfield =  defaultMap.HIC_ShopifySync__GQL_Field_API__c;
              }
            }
          }
          });
        
        let isRequired = false;
        if (this.requiredMapping && this.requiredMapping != 'null') {
          this.hasRequired = true;
          
          JSON.parse(this.requiredMapping).map((required) => {
            if (required.filedApiName.toUpperCase() == defaultMap.salesforcefields.toUpperCase()) {
              isRequired = true;
              this.requiredFieldMapping.push({
              Id: requiredIndex++, 
              salesforceId:defaultMap.salesforceId,
              salesforcefields: defaultMap.salesforcefields, salesforceFieldLabel: defaultMap.salesforceFieldLabel,
              salesforceFieldType: defaultMap.salesforceFieldType, 
              selectedfields: selectedfields, 
              graphqlfield:graphqlfield, 
              shopifyFieldName: defaultMap.shopifyFieldName,  shopifyApiName:defaultMap.shopifyApiName,
              shopifyFieldType: defaultMap.shopifyFieldType, flag: defaultMap.flag, shopifyNested: defaultMap.shopifyNested,
              shopifyOptions: this.shopifyOptionListSelection(defaultMap.salesforceFieldType), displayMultiSelectLayout: defaultMap.displayMultiSelectLayout,
              CurrencyIsoCode: this.CurrencyIsoCode, 
              HIC_ShopifySync__IsSFID: false, 
              HIC_ShopifySync__Store: this.storeName,
              sobjectType: this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields), 
              HIC_ShopifySync__External_ID: this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields) + '-' + defaultMap.salesforcefields,
              HIC_ShopifySync__Store_External_ID: this.storeName + this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields) + '-' + defaultMap.salesforcefields,
              disabledSalesforceCombobox: true, disabledShopifyCombobox: false,
              canAccessMergeFields: this.getCanSelectMergeFields(defaultMap.salesforceFieldType),
              showRecords:showRecords,
              defaultValue: defaultMap.defaultValue,
              defaultCheckboxDisabled: this.getCanChooseDefaultValue(defaultMap.salesforceFieldType),
              dataTypeInput: this.getDefaultValueDataType(defaultMap.salesforceFieldType),
              showError: ((defaultMap.defaultValue && defaultMap.selectedfields) || (!defaultMap.defaultValue && defaultMap.flag && defaultMap.shopifyFieldName) || (!defaultMap.defaultValue && !defaultMap.flag && defaultMap.selectedfields)) ? false : true,
              requiredFieldLabel:this.requiredFieldsOptions.filter((obj) => obj.value.toUpperCase()===defaultMap.salesforcefields.toUpperCase())[0]?.label,
              shopifyFieldCSS: this.changeShopifyFieldsCSS(defaultMap.salesforceFieldType),
              shopifyFieldLabel: this.changeShopifyFieldsLabel(defaultMap.salesforceFieldType),
              newOrEditedFields: false
              });
            }
          });
        }
        
        if (!isRequired && defaultMap.hasOwnProperty('salesforceFieldType')) {
          const selectedOption = this.salesforceFieldsOptions.find(option => option.value.toUpperCase() === defaultMap.salesforcefields.toUpperCase());
          if (selectedOption === null || selectedOption === undefined || selectedOption === 'undefined') {
            showRecords = false;
          }
          if(defaultMap.salesforcefields.toUpperCase() === 'PERSONEMAIL' || defaultMap.salesforcefields.toUpperCase() === 'PHONE'){
            showRecords =false;
          }

            this.objectFieldMapping.push({
            
              Id: optionIndex++, 
              salesforceId: defaultMap.salesforceId,
              salesforceOptions: this.getSalesforceFieldsOptions(),
              salesforcefields: defaultMap.salesforcefields, salesforceFieldLabel: defaultMap.salesforceFieldLabel,
              salesforceFieldType: defaultMap.salesforceFieldType, 
              selectedfields: selectedfields, 
              graphqlfield:graphqlfield, shopifyFieldName: defaultMap.shopifyFieldName, shopifyApiName:defaultMap.shopifyApiName,
              shopifyFieldType: defaultMap.shopifyFieldType, flag: defaultMap.flag, shopifyNested: defaultMap.shopifyNested,
              shopifyOptions: this.shopifyOptionListSelection(defaultMap.salesforceFieldType), displayMultiSelectLayout: defaultMap.displayMultiSelectLayout,
              CurrencyIsoCode: this.CurrencyIsoCode, 
              HIC_ShopifySync__IsSFID: false, 
              HIC_ShopifySync__Store: this.storeName,
              sobjectType: this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields), 
              HIC_ShopifySync__External_ID: this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields) + '-' + defaultMap.salesforcefields,
              HIC_ShopifySync__Store_External_ID: this.storeName + this.getObjectApiName(this.objectApiName, defaultMap.salesforcefields) + '-' + defaultMap.salesforcefields,
              disabledSalesforceCombobox: true, disabledShopifyCombobox: false,
              canAccessMergeFields: this.getCanSelectMergeFields(defaultMap.salesforceFieldType),
              showRecords:showRecords,
              // ????? IF SF FIELD TYPE  DATE AND DATETIME FIELD DEFAULT CHECKBOX SHOULD BE DISABLE AND UNCHECKED 
              defaultValue: defaultMap.defaultValue,
              defaultCheckboxDisabled: this.getCanChooseDefaultValue(defaultMap.salesforceFieldType),
              dataTypeInput: this.getDefaultValueDataType(defaultMap.salesforceFieldType),
              shopifyFieldCSS: this.changeShopifyFieldsCSS(defaultMap.salesforceFieldType),
              shopifyFieldLabel: this.changeShopifyFieldsLabel(defaultMap.salesforceFieldType),
              newOrEditedFields: false
            });
          this.salesforceSelectedFieldOptions.push(defaultMap.salesforcefields);
        }
      }
    }

     /**
     * Putting Required Field Mapping using default mapping
     */
     if (this.requiredMapping && this.requiredMapping != 'null') {
      this.hasRequired = true;
      let requiredIndex = 0;
      JSON.parse(this.requiredMapping).map((required) => {
        const requiredOption = this.requiredFieldMapping.find(option => option.salesforcefields.toUpperCase() === required.filedApiName.toUpperCase());
        requiredIndex++;
        if (requiredOption === null || requiredOption === undefined || requiredOption === 'undefined') {
         
          this.requiredFieldMapping.push({
            Id: requiredIndex, 
            salesforceId:null,
            salesforcefields: required.filedApiName, salesforceFieldLabel: required.filedlabel,
            salesforceFieldType: required.dataType, 
            selectedfields: required.filedApiName, 
            graphqlfield:null,
            shopifyFieldName: null,  shopifyApiName:null,
            shopifyFieldType: null, flag: false, shopifyNested: false,
            shopifyOptions: this.shopifyOptionListSelection(required.dataType), displayMultiSelectLayout: true,
            CurrencyIsoCode: this.CurrencyIsoCode, 
            HIC_ShopifySync__IsSFID: false, 
            HIC_ShopifySync__Store: this.storeName,
            sobjectType: this.getObjectApiName(this.objectApiName, required.filedApiName), 
            HIC_ShopifySync__External_ID: this.getObjectApiName(this.objectApiName, required.filedApiName) + '-' + required.filedApiName,
            HIC_ShopifySync__Store_External_ID: this.storeName + this.getObjectApiName(this.objectApiName, required.filedApiName) + '-' + required.filedApiName,
            disabledSalesforceCombobox: true, disabledShopifyCombobox: false,
            canAccessMergeFields: this.getCanSelectMergeFields(required.dataType),
            showRecords:true,
            defaultValue: false,
            defaultCheckboxDisabled: this.getCanChooseDefaultValue(required.dataType),
            dataTypeInput: this.getDefaultValueDataType(required.dataType),
            showError: true,
            requiredFieldLabel:this.requiredFieldsOptions.filter((obj) => obj.value.toUpperCase()===required.filedApiName.toUpperCase())[0]?.label,
            shopifyFieldCSS: this.changeShopifyFieldsCSS(required.dataType),
            shopifyFieldLabel: this.changeShopifyFieldsLabel(required.dataType),
            newOrEditedFields: false});
          }
      });
    }
    this.handleonchange();
  }

  // GET Salesforce Field Options
  getSalesforceFieldsOptions() {
    return this.salesforceFieldsOptions.filter((obj) => {
      if (this.salesforceSelectedFieldOptions && !this.salesforceSelectedFieldOptions.includes(obj.value)) {
        return obj;
      }
    });
  }

  // This method is used to create a list for the selection of shopify based on salesforce selection
  shopifyOptionListSelection(dataType) {
    let shopifyOptionsList = [];
    if (dataType !== undefined && dataType !== null && dataType !== '') {
      if (dataType.toUpperCase() == 'TEXTAREA' || dataType.toUpperCase() == 'STRING' || dataType.toUpperCase() == 'LONG TEXT AREA') {
          shopifyOptionsList = [];
          shopifyOptionsList.push(...this.stringList);
          shopifyOptionsList.push(...this.numberList);
          shopifyOptionsList.push(...this.dateTimeList);
          shopifyOptionsList.push(...this.phoneList);
          shopifyOptionsList.push(...this.booleanList);
          shopifyOptionsList.push(...this.urlList);
        } else if (dataType.toUpperCase() == 'PHONE') {
          shopifyOptionsList = [];
          shopifyOptionsList.push(...this.phoneList);
        } else if (dataType.toUpperCase() == 'PICKLIST') {
          shopifyOptionsList = [];
          shopifyOptionsList.push(...this.stringList);
        } else if (dataType.toUpperCase() == 'INTEGER' || dataType.toUpperCase() == 'NUMBER' || dataType.toUpperCase() == 'DOUBLE' || dataType.toUpperCase() == 'CURRENCY') {
          shopifyOptionsList = [];
          shopifyOptionsList.push(...this.numberList);
        } else if (dataType.toUpperCase() == 'BOOLEAN') {
          shopifyOptionsList = [];
          shopifyOptionsList.push(...this.booleanList);
      }else if(dataType.toUpperCase() == 'DATETIME' || dataType.toUpperCase() == 'DATE'){
        shopifyOptionsList = [];
        shopifyOptionsList.push(...this.dateTimeList);
      }else if(dataType.toUpperCase() == 'URL'){
        shopifyOptionsList = [];
        shopifyOptionsList.push(...this.urlList);
        //ADDED ALL VALUES IN THE LIST WHEN DATATYPE IS URL
        shopifyOptionsList.push(...this.stringList);
        shopifyOptionsList.push(...this.numberList);
        shopifyOptionsList.push(...this.booleanList);
        shopifyOptionsList.push(...this.dateTimeList);
        shopifyOptionsList.push(...this.phoneList);
      }else if(dataType.toUpperCase() == 'PERCENT') {
        shopifyOptionsList.push(...this.numberList);
      }

    }
    return shopifyOptionsList;
  }

  //This methods returns datatype
  getDefaultValueDataType(dataType) {
    if (dataType !== undefined && dataType !== null && dataType !== '') { 
      if(dataType.toUpperCase() == 'STRING' || dataType.toUpperCase() == 'URL'){
        return 'Text';
      } else if (dataType.toUpperCase() == 'NUMBER' || dataType.toUpperCase() == 'DOUBLE' || dataType.toUpperCase() == 'CURRENCY') {
        return 'NUMBER';
      } else if (dataType.toUpperCase() == 'BOOLEAN') {
        return 'CHECKBOX';
      }
    }
    return dataType;
  }

  // THIS METHOD HANDLES THE PERSON ACCOUNT 
  getObjectApiName(objectApiName, salesforcefields) {
    this.disabledAddRow = false;
    if (objectApiName !== undefined && objectApiName !== null && objectApiName !== '' &&
        salesforcefields !== undefined && salesforcefields !== null && salesforcefields !== '' ) { 
      if(objectApiName.toUpperCase() == 'PERSONACCOUNT' && !salesforcefields.toUpperCase().includes('PERSON') && !salesforcefields.toUpperCase().includes('FIRSTNAME') && !salesforcefields.toUpperCase().includes('LASTNAME')){
        return 'Account';
      }
    }
    return objectApiName;
  }

  // This method Gets the Accessibility of the default Value
  getCanChooseDefaultValue(dataType) {
    if (dataType !== undefined && dataType !== null && dataType !== '' && (dataType.toUpperCase() == 'STRING' || dataType.toUpperCase() == 'NUMBER' || dataType.toUpperCase() == 'DOUBLE' || dataType.toUpperCase() == 'CURRENCY' || dataType.toUpperCase() == 'BOOLEAN' ||  dataType.toUpperCase() == 'URL')){
      return false;
    }
    return true;
  }

  // Get the Accessebility of the merge fields
  getCanSelectMergeFields(dataType) {
    if (dataType !== undefined && dataType !== null && dataType !== '' && (dataType.toUpperCase() == 'STRING' || dataType.toUpperCase() == 'LONG TEXT AREA' || dataType.toUpperCase() == 'TEXTAREA')){
      return true;
    }
    return false;
  }

  // THIS METHOD IS USED TO CHANGE THE CSS OF SHOPIFY COLUMN
  changeShopifyFieldsCSS(dataType){
    let shopifyFieldCSS='';
    if (dataType !== undefined && dataType !== null && dataType !== ''){
      if(dataType.toUpperCase() == 'BOOLEAN'){
        shopifyFieldCSS = 'slds-m-top_x-large slds-m-bottom_xx-small sme-fm-text';
        return shopifyFieldCSS;
      }else {
        shopifyFieldCSS = 'sme-fm-text';
        return shopifyFieldCSS;
      }
    }
  }

  // THIS METHOD IS USED TO CHANGE THE Label OF SHOPIFY COLUMN
  changeShopifyFieldsLabel(dataType){
    let shopifyFieldLabel = '';
    if (dataType !== undefined && dataType !== null && dataType !== ''){
      if(dataType.toUpperCase() == 'BOOLEAN'){
        shopifyFieldLabel = '';
        return shopifyFieldLabel;
      }else {
        shopifyFieldLabel = this.label.Enter_a_value;
        return shopifyFieldLabel;
      }
    }  
  }
      
  //This method Change the Shopify field Value
  changeShopifyField(event){
    if (event.target.dataset.id == 'required') {
      for(let shopify of this.requiredFieldMapping){
          if(event.target.dataset.value == shopify.Id){
            shopify.selectedfields = event.detail.value;
            shopify.newOrEditedFields = true;
            shopify.graphqlfield =null;
            for (let options of shopify.shopifyOptions){
              if (options.value == shopify.selectedfields) {
                shopify.shopifyFieldName = options.HIC_ShopifySync__Field_Name__c;
                shopify.shopifyFieldType = options.dataType;
                shopify.disabledSalesforceCombobox = true;
                if(options.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                  shopify.graphqlfield = options.HIC_ShopifySync__GQL_Field_API__c;
                }
                if (options.label.includes('.')) {
                  shopify.shopifyNested = options.label.split('.')[0];
                  
                } else {
                  shopify.shopifyNested = null;
                }
                // Calling error method 
                shopify.showError = this.errorMessageOnRequiredFields(shopify);
               }
              }
            }
          }
      
    } else {
      for(let shopify of this.objectFieldMapping){
        if(event.target.dataset.value == shopify.Id){
          shopify.selectedfields = event.detail.value;
          shopify.newOrEditedFields =  true;
          shopify.graphqlfield =null;
          for (let options of shopify.shopifyOptions){
            if (options.value == shopify.selectedfields) {
              shopify.shopifyFieldName = options.HIC_ShopifySync__Field_Name__c;
              shopify.shopifyFieldType = options.dataType;
              shopify.disabledSalesforceCombobox = true;
              if(options.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
                shopify.graphqlfield = options.HIC_ShopifySync__GQL_Field_API__c;
              }
              if ((options.label.includes('.')) && (shopify.dataTypeInput.toUpperCase() !== 'URL')) {
                shopify.shopifyNested = options.label.split('.')[0];
              } else {
                shopify.shopifyNested = null;
              }
            } 
          }
        }
      }
    }
    this.handleonchange();
  }

  //This method Change the Salesforce Field Values
  changeSalesforceField(event){
    const selectedOption = this.salesforceFieldsOptions.find(option => option.value === event.detail.value);

    if (event.target.dataset.id == 'required') {
      let error = false;
      const selectedSalesforceOption = this.requiredFieldMapping.find(option => option.salesforcefields === event.detail.value);
      if (selectedSalesforceOption !== null && selectedSalesforceOption !== undefined && selectedSalesforceOption !== 'undefined') {
        error = true;
        this.showNotification(this.label.Error,'Error',this.label.Field_Already_Selected);
      }
      for (let salesforce of this.requiredFieldMapping) {
        if (event.target.dataset.value == salesforce.Id) {
          if (error) {
            salesforce.disabledShopifyCombobox = true;
            salesforce.salesforcefields = salesforce.salesforcefields;
            return null;
          } else {
            let shopifyOptionsList = this.shopifyOptionListSelection(selectedOption.dataType);
            salesforce.salesforcefields = event.detail.value;
            salesforce.salesforceFieldLabel = selectedOption.label;
            salesforce.salesforceFieldType = selectedOption.dataType;
            salesforce.disabledSalesforceCombobox = false;
            salesforce.disabledShopifyCombobox = false;
            salesforce.shopifyOptions = shopifyOptionsList;
            salesforce.selectedfields = '';
            salesforce.graphqlfield = '';
            salesforce.shopifyFieldName = '';
            salesforce.shopifyFieldType = '';
            salesforce.shopifyApiName = '';
            salesforce.defaultValue = false;
            salesforce.dataTypeInput = this.getDefaultValueDataType(selectedOption.dataType.toUpperCase());
            salesforce.defaultCheckboxDisabled = this.getCanChooseDefaultValue(selectedOption.dataType.toUpperCase());
            salesforce.HIC_ShopifySync__External_ID = this.getObjectApiName(this.objectApiName, event.detail.value) + '-' + event.detail.value;
            salesforce.HIC_ShopifySync__Store_External_ID = this.storeName + this.getObjectApiName(this.objectApiName, event.detail.value) + '-' + event.detail.value;
            salesforce.canAccessMergeFields = this.getCanSelectMergeFields(selectedOption.dataType);
            salesforce.shopifyFieldCSS = this.changeShopifyFieldsCSS(selectedOption.dataType.toUpperCase());
            salesforce.shopifyFieldLabel = this.changeShopifyFieldsLabel(selectedOption.dataType.toUpperCase());
            salesforce.newOrEditedFields = true;
          }  
        }
      }
    } else {
      const selectedSalesforceOption = this.objectFieldMapping.find(option => option.salesforcefields === event.detail.value);
      let error = false;
      if (selectedSalesforceOption !== null && selectedSalesforceOption !== undefined && selectedSalesforceOption !== 'undefined') {
        error = true;
        this.showNotification(this.label.Error,'Error',this.label.Field_Already_Selected);
      }
      for (let salesforce of this.objectFieldMapping) {
        if (event.target.dataset.value == salesforce.Id) {
          if (error) {
            this.objectFieldMapping.splice(this.objectFieldMapping.indexOf(salesforce), 1);
            this.objectFieldMapping.push(salesforce);
            return null;
          } else {            
            let shopifyOptionsList = this.shopifyOptionListSelection(selectedOption.dataType); 
            salesforce.salesforceOptions = this.getSalesforceFieldsOptions();
            if (salesforce.salesforcefields) {
              this.disabledAddRow = false;
              this.salesforceSelectedFieldOptions.pop(salesforce.salesforcefields);
            }
            this.salesforceSelectedFieldOptions.push(event.detail.value);
            salesforce.salesforcefields = event.detail.value;
            salesforce.salesforceFieldLabel = selectedOption.label;
            salesforce.salesforceFieldType = selectedOption.dataType;
            salesforce.disabledSalesforceCombobox = false;
            salesforce.disabledShopifyCombobox = false;
            salesforce.shopifyOptions = shopifyOptionsList;
            salesforce.selectedfields = '';
            salesforce.graphqlfield = '';
            salesforce.shopifyFieldName = '';
            salesforce.shopifyFieldType = '';
            salesforce.shopifyApiName = '';
            salesforce.defaultValue = false;
            salesforce.dataTypeInput = this.getDefaultValueDataType(selectedOption.dataType.toUpperCase());
            salesforce.defaultCheckboxDisabled = this.getCanChooseDefaultValue(selectedOption.dataType.toUpperCase());
            salesforce.HIC_ShopifySync__External_ID =  this.getObjectApiName(this.objectApiName, event.detail.value) + '-' + event.detail.value;
            salesforce.HIC_ShopifySync__Store_External_ID = this.storeName + this.getObjectApiName(this.objectApiName, event.detail.value) + '-' + event.detail.value;
            salesforce.canAccessMergeFields = this.getCanSelectMergeFields(selectedOption.dataType);
            salesforce.shopifyFieldCSS = this.changeShopifyFieldsCSS(selectedOption.dataType.toUpperCase());
            salesforce.shopifyFieldLabel = this.changeShopifyFieldsLabel(selectedOption.dataType.toUpperCase());
            salesforce.newOrEditedFields = true;
          }
        }
      }
    }           
  }

  // This method handles 'Add Row +' button to add more optional fields
  addObjectRow(){
    this.disabledAddRow = true;
    let objLength = this.objectFieldMapping.length + 1;
    let shopifyOptionsList = [];
    // DISABLE THE DEFAULT CHECKBOX WHEN DATATYPE IS BOOLEAN
    this.objectFieldMapping.push({
      Id: objLength, sobjectType: this.objectApiName,
        salesforceOptions: this.getSalesforceFieldsOptions(),
        salesforceId:'',
          salesforcefields: '', salesforceFieldLabel: '',
          salesforceFieldType:'', defaultValue: false,
        selectedfields: '', 
        graphqlfield:'', shopifyFieldName: '',
        shopifyApiName: '',
          shopifyFieldType: '', flag: false, shopifyNested: null,
        shopifyOptions: shopifyOptionsList, displayMultiSelectLayout: false,
         CurrencyIsoCode: this.CurrencyIsoCode, HIC_ShopifySync__External_ID: '',
            HIC_ShopifySync__IsSFID: false, 
            HIC_ShopifySync__Store: this.storeName,
            HIC_ShopifySync__Store_External_ID: '',
        disabledSalesforceCombobox: false, disabledShopifyCombobox: true,
        canAccessMergeFields: false,
      showRecords:true,
      defaultCheckboxDisabled: true,
      dataTypeInput: '',
      newOrEditedFields: true
    });
  }

  /// This method handles delete button to remove particular optional fields row
  deleteObjectRow(event){
    let indexNumber = 1;
    for(let shopify of this.objectFieldMapping){
        if(event.target.dataset.value == shopify.Id){
            indexNumber = this.objectFieldMapping.indexOf(shopify);
        }
    }
    if(indexNumber != null){
      // the below code is use to store the delete row Salesforce ID 
      this.storeDeleteCustomSettingRecords =[];
      // Store the Salesforce ID of the deleted row and dispatch to parent mapping 
      if (this.objectFieldMapping[indexNumber].salesforcefields) {
        let findIndex = this.salesforceSelectedFieldOptions.indexOf(this.objectFieldMapping[indexNumber].salesforcefields);
        if(findIndex !== -1){
          this.salesforceSelectedFieldOptions.splice(findIndex,1);
        }
      }else{
        this.disabledAddRow = false;
      }
      
      this.storeDeleteCustomSettingRecords.push( this.objectFieldMapping[indexNumber].salesforceId);
      const passDeleteRowEvent = new CustomEvent('deletedrowvalues', {detail: this.storeDeleteCustomSettingRecords});
      this.dispatchEvent(passDeleteRowEvent);

      this.objectFieldMapping.splice(indexNumber, 1);
      let shopifyIndex = 1;
      for(let shopify of this.objectFieldMapping){
          shopify.Id =  shopifyIndex;
          shopifyIndex++;
        }
      }
      // THIS IS USED TO SHOW THE SALESFORCE OPTION IN THE SELECTED ROW
      this.objectFieldMapping.map((obj)=>{
        if((!obj.salesforceId || obj.salesforceId == undefined) && (!obj.salesforcefields)){
          obj.salesforceOptions = this.getSalesforceFieldsOptions();
          return obj;
        }
      });
    this.handleonchange();
   }

  // This method handles the closing of 'Add multiple fields' modal
  closeModal(){
    this.openMultiSelectField = false;
    this.showMergeFieldList = false;
    this.selectedValues = [];
    if (this.tableType == 'required') {
      for(let obj of this.requiredFieldMapping){
        if(obj.Id == this.indexId){
          // put the previous value in the variables 
          obj.selectedfields = '';
          obj.graphqlfield = '';
          obj.shopifyFieldName = '';
          obj.displayMultiSelectLayout = true;
          obj.flag = false;
          obj.showError = true;
        }
      }
    } else {
      for(let obj of this.objectFieldMapping){
        if(obj.Id == this.indexId){
          obj.selectedfields = '';
          obj.graphqlfield = '';
          obj.shopifyFieldName = '';
          obj.displayMultiSelectLayout = true;
          obj.flag = false;
        }
      }
    }
    
    // Check if needed while making other fields empty
    this.handleonchange();
  }

  //This method handles the 'Multiple Fields' button to Select fields from multiple Values to save data
  selectMultiple(event) {
    this.selectedValues = [];
    this.mergeFields = [];
    this.openMultiSelectField = true;
    this.displayMultiSelectLayout = true;
    this.indexId = event.target.dataset.value;
    this.tableType = event.target.dataset.id;
    this.nestedFieldList = [];
    this.shopifyFieldsOptions.map((obj) => {
      if (obj.label.includes('.')) {
        let constValue = this.nestedFieldList.filter((nestedObj) => nestedObj.label === obj.label.split('.')[0]);
        if (constValue && constValue.length === 0) {
          this.nestedFieldList.push({ label: obj.label.split('.')[0], value: obj.label.split('.')[0] });
        }
      }
    });
    this.nestedFieldList.push({ label: 'Others', value: 'Others' });

    // THIS METHOD IS USED EMPTY FIELD FROM LIST BOX IF NEW FIELD IS SELECTED 
    let mergefieldsValue = [];
    if(this.tableType == 'required'){
      this.requiredFieldMapping.map((obj) =>{
        if(obj.Id == this.indexId){
          if(!obj.shopifyNested){
            this.getMergeFieldList('Others');
          }else{
            this.getMergeFieldList(obj.shopifyNested);
          }
          if(obj.shopifyFieldName.includes(',')){
            let selectedValues = obj.shopifyFieldName.split(',');
            mergefieldsValue.push(...selectedValues);
          }else{
            mergefieldsValue.push(obj.shopifyFieldName);
          }

          this.shopifyFieldsOptions.map((shopify) =>{
            if((!obj.shopifyNested || (shopify.hasOwnProperty('HIC_ShopifySync__Nested__c') && obj.shopifyNested && shopify.HIC_ShopifySync__Nested__c.toUpperCase() === obj.shopifyNested.toUpperCase())) && 
              mergefieldsValue.includes(shopify.HIC_ShopifySync__Field_Name__c)){
              this.mergeFields.push(shopify.value);
              this.selectedValues.push(shopify.value);  
            }
          }); 
        }
      });
    }else{
      this.objectFieldMapping.map((obj) =>{
        if(obj.Id == this.indexId){
          if(!obj.shopifyNested){
            this.getMergeFieldList('Others');
          }else{
            this.getMergeFieldList(obj.shopifyNested);
          }
          if(obj.shopifyFieldName.includes(',')){
            let selectedValues = obj.shopifyFieldName.split(',');
            mergefieldsValue.push(...selectedValues);
          }else{
            mergefieldsValue.push(obj.shopifyFieldName);
          }

          this.shopifyFieldsOptions.map((shopify) =>{
            if((!obj.shopifyNested || (shopify.hasOwnProperty('HIC_ShopifySync__Nested__c') && obj.shopifyNested && shopify.HIC_ShopifySync__Nested__c.toUpperCase() === obj.shopifyNested.toUpperCase())) && 
              mergefieldsValue.includes(shopify.HIC_ShopifySync__Field_Name__c)){
              this.mergeFields.push(shopify.value);
              this.selectedValues.push(shopify.value);             
            }
          });  
        }
      });
    }
  
    if(this.selectedValues.length > 0){
      this.showMergeFieldList = true;
    }else{
      this.showMergeFieldList = false;
    }
  }

  //This method handles the 'select any field' input values after clicking Multiple Fields button
  handleNestedMergeField(event){
    this.showMergeFieldList = true;
    this.getMergeFieldList(event.detail.value);
  }

  //THIS METHOD GETS THE SELECTED MERGE FIELD LIST
  getMergeFieldList(selectedValue){
    this.mergeFieldList=[];
    this.selectedValues =[];
    this.mergeFields=[];
    this.mergeFieldList = this.shopifyFieldsOptions.filter((obj) => {
      if (selectedValue === 'Others' && !obj.label.includes('.')) {
        return obj;
      } else if (obj.label.includes('.') && obj.label.split('.')[0] === selectedValue) {
        return obj;
      }
    });
    this.showMergeFieldList = true;
  }

   //This method handles the Selected Values for picklists on selecting multiple fields
   selectedList(event){
    this.selectedValues = event.detail.value;
    this.mergeFields = event.detail.value;
  }

  //This method handles the 'Apply & Close' button on selected merge fields
  handleMergeFields() {
    this.openMultiSelectField = false;
    this.showMergeFieldList = false;
    let shopifyFieldApiMapping = [];
    let shopifyFieldNameList = [];
    let graphqlfieldList = [];
    let selectedfields = '';
    let shopifyFieldName = '';
    let graphqlfield = '';
     let itemList =[];
    
      for (let shopify of this.shopifyFieldsOptions) {
        if (this.mergeFields.includes(shopify.value)) {
          shopifyFieldApiMapping.push(shopify.HIC_ShopifySync__UI_Label_Name__c);
          shopifyFieldNameList.push(shopify.HIC_ShopifySync__Field_Name__c);
          if(shopify.hasOwnProperty('HIC_ShopifySync__GQL_Field_API__c')){
            graphqlfieldList.push(shopify.HIC_ShopifySync__GQL_Field_API__c);
          }
        }
      }
    
    selectedfields = shopifyFieldApiMapping.join(',');
    shopifyFieldName = shopifyFieldNameList.join(',');
    graphqlfield = graphqlfieldList.join(',');
      selectedfields.split(',').map(item =>{
        const itemobj = {
          label: item
        }
        itemList.push(itemobj);
    });
    if (this.tableType == 'required') {
      for(let obj of this.requiredFieldMapping){
        if(obj.Id == this.indexId){
            if(selectedfields.includes('.')){
              obj.shopifyNested = selectedfields.split('.')[0]; 
              selectedfields = selectedfields.replaceAll(obj.shopifyNested,'');
              selectedfields = selectedfields.replaceAll('.','');
              graphqlfield = graphqlfield.replaceAll(obj.shopifyNested,'');
              graphqlfield = graphqlfield.replaceAll('.','');
          } else {
            obj.shopifyNested = null;
          }
          obj.selectedfields = selectedfields;
           obj.selectedfieldsList = itemList;
          obj.shopifyFieldName = shopifyFieldName;
          obj.graphqlfield = graphqlfield;
          obj.displayMultiSelectLayout = true;
          obj.flag = true;
          obj.newOrEditedFields = true;
        }
        obj.showError = this.errorMessageOnRequiredFields(obj);
      }
    } else {
      for(let obj of this.objectFieldMapping){
        if(obj.Id == this.indexId){
          if(selectedfields.includes('.')){
            obj.shopifyNested = selectedfields.split('.')[0];
            selectedfields = selectedfields.replaceAll(obj.shopifyNested, '');
            selectedfields = selectedfields.replaceAll('.','');
            graphqlfield = graphqlfield.replaceAll(obj.shopifyNested,'');
            graphqlfield = graphqlfield.replaceAll('.','');
          }else{
            obj.shopifyNested = null;
          }
          obj.selectedfields = selectedfields;
          obj.selectedfieldsList = itemList;
          obj.shopifyFieldName = shopifyFieldName;
          obj.graphqlfield = graphqlfield;
          obj.displayMultiSelectLayout = true;
          obj.flag = true;
          obj.newOrEditedFields = true;
        }
      }
    }
    this.handleonchange();
  }
  
   handleItemRemove(event) {
    const idx   = event.detail.index;
    console.log('idx', idx);
    const rowId = event.currentTarget.dataset.rowId;
    console.log('rowId', rowId);
    /* 1. pick the CURRENT array (tracked) */
    const isRequired = this.tableType === 'required';
    let src = isRequired ? this.requiredFieldMapping : this.objectFieldMapping;
    /* 2. work on a BRAND-NEW copy */
    src = [...src];
    /* 3. locate the row */
    const row = src.find(r => String(r.Id) === String(rowId));
    console.log('row', row);
    if (!row) return;          // nothing to do
    /* 4. mutate the copy */
    row.selectedfieldsList.splice(idx, 1);
    row.selectedfieldsList = [...row.selectedfieldsList];
    /* 5. write back → triggers re-render */
    if (isRequired) {
        this.requiredFieldMapping = src;
    } else {
        this.objectFieldMapping = src;
    }
}
  
  // ── Field count for pill display ──
  get fieldCount() {
    if (this.useDefault) {
      return this.defaultMappingList ? this.defaultMappingList.length : 0;
    }
    const req = this.requiredFieldMapping ? this.requiredFieldMapping.length : 0;
    const opt = this.objectFieldMapping ? this.objectFieldMapping.filter(f => f.showRecords).length : 0;
    return req + opt;
  }
  get fieldCountLabel() {
    return this.fieldCount + ' fields';
  }

  // ── Custom toggle getter (Step 3 pattern) ──
  get defaultToggleClass() {
    return 'obj-toggle-track' + (this.useDefault ? ' obj-toggle-track_on' : '');
  }
  handleDefaultToggleClick() {
    this.handleDefaultMapping();
  }

  // This method is used to handle Default Mapping toggle value
  handleDefaultMapping() {
    this.useDefault = !this.useDefault;
    this.handleonchange();
    this.dispatchOpportunityEvent();
    // Generic notification (all objects) so the parent can update the
    // "Default mapping of all objects" master toggle's own appearance.
    // Display-only: does not affect save logic.
    this.dispatchEvent(new CustomEvent("defaultmappingchange", {
      detail: { objectName: this.objectName, useDefault: this.useDefault }
    }));
  }

  //This method controls Opening or Closing of the object's lists
  openCloseTable(){
    this.openTable = !this.openTable;
  }

  // METHOD TO SHOW OBJECT NAME OF EMPTY FIELD 
  checkEmptyField() {
    if (this.useDefault) { 
      const passEvent = new CustomEvent('errorfielddetails', {detail: {'objectName':this.objectName, 'requiredFields': null}});
      this.dispatchEvent(passEvent);
    } else {
      const passEvent = new CustomEvent('errorfielddetails', {detail: {'objectName':this.objectName, 'requiredFields': this.requiredFieldMapping}});
      this.dispatchEvent(passEvent);
    }
  }

  //This methods handles the changed values of objectFieldMapping and requiredFieldMapping
  handleonchange() {
    this.checkEmptyField();
    let objectList = [];
    if (!this.useDefault) {
      objectList.push(...this.objectFieldMapping);
      objectList.push(...this.requiredFieldMapping);
    } else {
      objectList.push(...this.defaultMappingList);
    }
    const passEvent = new CustomEvent('changedvalues', {detail: { value: objectList, obj:this.objectName}});
    this.dispatchEvent(passEvent);
  }
  
  // Not in use 
  //handle delete row records 
  handleOnChangeDeleteRow(){
    let deleteRowList = [];
    deleteRowList.push(...this.storeDeleteCustomSettingRecords);
    const passDeleteRowEvent = new CustomEvent('deletedrowvalues', {detail: deleteRowList});
    this.dispatchEvent(passDeleteRowEvent);
  }

  //This method sends the true/false value of the Opportunity if it is default or not
  dispatchOpportunityEvent() {
    if (this.objectName == this.label.Opportunity) {
      const oppEvent = new CustomEvent("opportunitydefault", {
        detail: { value: !this.useDefault }       
      });
        this.dispatchEvent(oppEvent);
    }
  }

  //This method handles the Default checkbox value
  handleDefaultCheckbox(event) {
    if (event.target.dataset.id == 'required') {
      let listToBeChanged = this.requiredFieldMapping;
      this.requiredFieldMapping = listToBeChanged.map((obj) => {
          if (obj.Id == event.target.dataset.value) {
            obj.defaultValue = !obj.defaultValue;
            obj.newOrEditedFields = true;            
            // WHEN DEFAULT CHECKBOX IS TRUE THEN MAKE SELECTED FIELDS EMPTY
            if(obj.defaultValue){
              obj.shopifyFieldName = null;
              obj.selectedfields = null;
              obj.graphqlfield = null;
              if (obj.dataTypeInput.toUpperCase() === 'CHECKBOX') {
                obj.shopifyFieldType = obj.salesforceFieldType;
                obj.selectedfields = false;
                obj.graphqlfield = false;
              }
            } else {
              obj.shopifyOptions.map((objectMap) => {
                if (objectMap.value === obj.selectedfields) {
                  obj.shopifyFieldName = objectMap.HIC_ShopifySync__Field_Name__c;
                  obj.shopifyFieldType = objectMap.dataType;
                  obj.disabledSalesforceCombobox = true;
                }                  
              });
            }
            obj.showError = true;
          }        
        return obj;
      });
    } else {
      let listToBeChanged = this.objectFieldMapping;
      this.objectFieldMapping = listToBeChanged.map((obj) => {
        if (obj.Id == event.target.dataset.value) {
          obj.defaultValue = !obj.defaultValue;
          obj.newOrEditedFields = true;
          // ??? WHEN DEFAULT CHECKBOX IS TRUE THEN MAKE SELECTED FIELDS EMPTY
          if(obj.defaultValue){
            obj.shopifyFieldName = null;
            obj.selectedfields = null;
            obj.graphqlfield = null;
            if (obj.dataTypeInput.toUpperCase() === 'CHECKBOX') {
              obj.shopifyFieldType = obj.salesforceFieldType;
              obj.selectedfields = false;
              obj.graphqlfield = false;
            }            
          } else {
            obj.shopifyOptions.map((objectMap) => {
              if (objectMap.value === obj.selectedfields) {
                obj.shopifyFieldName = objectMap.HIC_ShopifySync__Field_Name__c;
                obj.shopifyFieldType = objectMap.dataType;
                obj.disabledSalesforceCombobox = true;
              }                  
            });
          } 
        }
        return obj;
      });
    }

    this.handleonchange(); 
  }
  
  //This method handles the input value of Default fields when the Default checkbox is unchecked
  handleDataInputValues(event) {
    if (event.target.dataset.id == 'required') {
      let listToBeChanged = this.requiredFieldMapping;
      this.requiredFieldMapping = listToBeChanged.map((obj) => {
        if (obj.Id == event.target.dataset.value) {
          if (obj.dataTypeInput.toUpperCase() === 'CHECKBOX') {
            obj.selectedfields = event.target.checked;
            obj.graphqlfield = event.target.checked;
            obj.newOrEditedFields = true;
          }else{
            obj.selectedfields = event.target.value;
            obj.graphqlfield = event.target.value;
            obj.newOrEditedFields = true;
          }
          // Show ERROR if contains only white spaces 
          if (this.isEmptyOrWhitespace(obj.selectedfields)) {
            obj.showError = true; 
          }
          else{
            obj.showError = this.errorMessageOnRequiredFields(obj);
          }
            
        }
          
        return obj;
      });
    } else {
      let listToBeChanged = this.objectFieldMapping;
      this.objectFieldMapping = listToBeChanged.map((obj) => {
        if (obj.Id == event.target.dataset.value) {
          // ??? CHECK INPUT TYPE 
          // ??? ADDED THE BELOW LINE OF CODE TO CHECK IF THE DATATYPE 
          if (obj.dataTypeInput.toUpperCase() === 'CHECKBOX') {
            obj.selectedfields = event.target.checked;
            obj.graphqlfield = event.target.checked;
            obj.newOrEditedFields = true;
          }else{
            obj.selectedfields = event.target.value;
            obj.graphqlfield = event.target.value;
            obj.newOrEditedFields = true;
          }          
        }
        return obj;
      });
    } 
    this.handleonchange();
  }

  isEmptyOrWhitespace(input) {
    return !input || /^\s*$/.test(input);
  }

  // This method will handle the error message on empty required fields 
  errorMessageOnRequiredFields(shopify){
    if ((shopify.defaultValue && shopify.selectedfields) || (!shopify.defaultValue && ((shopify.flag && shopify.shopifyFieldName) || (!shopify.flag && shopify.selectedfields && shopify.shopifyFieldName !== null)))) {
        return false;
    }else{
      return true;
    }
  }

  //Helps to Show a Toast Message 
  // Custom brand toast instead of ShowToastEvent. Same signature/callers.
  showNotification(title, variant, message) {
    const v = (variant || '').toString().toLowerCase();
    const kind = v === 'error' ? 'error' : v === 'success' ? 'success' : v === 'warning' ? 'warning' : 'info';
    const id = 't' + (this._toastSeq++);
    this.toasts = [...this.toasts, {
      id, title, message,
      cssClass: 'sw-toast sw-toast-' + kind,
      iconLabel: kind === 'error' ? '⚠' : kind === 'success' ? '✓' : kind === 'warning' ? '!' : 'ℹ'
    }];
    if (kind !== 'error') {
      // eslint-disable-next-line @lwc/lwc/no-async-operation
      setTimeout(() => this._dismissToast(id), 4000);
    }
  }

  _dismissToast(id) {
    this.toasts = this.toasts.filter((t) => t.id !== id);
  }

  handleToastClose(event) {
    this._dismissToast(event.currentTarget.dataset.id);
  }

  // Removing Close DATE from child

  @api removeCloseDate(){
    if(this.objectApiName.toUpperCase() === 'OPPORTUNITY'){
      let removeClosedDateRequired = this.requiredFieldMapping;
      this.requiredFieldMapping = removeClosedDateRequired.map((obj)=>{
        if(obj.sobjectType.toUpperCase() === 'OPPORTUNITY' && obj.HIC_ShopifySync__External_ID.toUpperCase() === "OPPORTUNITY-CLOSEDATE"){ 
          if(this.specifyCloseDate){
            obj.showRecords = false;
            obj.defaultValue = false;
            obj.defaultCheckboxDisabled = true;
            // obj.selectedfields = null;
          }else if(!this.specifyCloseDate ){
            obj.showRecords = true;
            obj.defaultValue = false;
            obj.defaultCheckboxDisabled = true;
            // this.daysValue = null;
            // obj.showError = true;
          }
        }
        return obj;
      });
      this.handleonchange();
    }
    
  }

}