give me a full explanation of these code.

let ticketworkflowconditions = [];

async function loadExistingWorkflowConditions() {
  // console.log("Mapping Data for Workflows:", alldata.ticket_workflow_conditions);
  // for (const obj of alldata.ticket_workflow_conditions) {
  //   console.log('Loading rule for event:', eventName);
  //   await addNewRule(obj);
  // }

  //thayammal
  for (let index = 0; index < ticketworkflowconditions.length; index++) {
    const element = ticketworkflowconditions[index];
    await addNewRule(null, element, index);
  }
}

async function addNewRule(_event, obj, ruleIndex = ticketworkflowconditions.length) {
  const ticketworkflowContainer = document.getElementById('ticketworkflow-container');
  const eventContainer = document.createElement('div');
  eventContainer.classList.add('event-container');
  eventContainer.style.boxShadow = '0 5px 10px 0 rgba(0, 0, 0, 0.2)';
  eventContainer.style.padding = '30px';
  eventContainer.style.marginBottom = '15px';
  eventContainer.style.borderRadius = '5px';
  eventContainer.style.backgroundColor = '#fff';



  // if(obj != null){

  const newDropdownSet = await createEventDropdownSet(obj, ruleIndex);
  eventContainer.appendChild(newDropdownSet);

  ticketworkflowContainer.appendChild(eventContainer);
  await initializeEventDropdown(newDropdownSet, obj, ruleIndex);

  // }




}

async function createEventDropdownSet(obj, ruleIndex) {
  console.log("Creating Event Dropdown");
  const eventValue = obj?.event?.eventValue;
  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

  const selectedEvent = typeof eventValue === 'string' ? eventValue : '';

  newDropdownSet.innerHTML = `
    <div class="col-md-2 event-name-container">
      <fw-select
        class="event-name-dropdown"
        label="Select Event Name"
        required="true"
        placeholder="Your choice"
        hint-text="Select singular option">
        <fw-select-option value="TicketCreate" ${selectedEvent === "TicketCreate" ? "selected" : ""}>Ticket Create</fw-select-option>
        <fw-select-option value="TicketUpdate" ${selectedEvent === "TicketUpdate" ? "selected" : ""}>Ticket Update</fw-select-option>
        <fw-select-option value="TicketCreateandUpdate" ${selectedEvent === "TicketCreateandUpdate" ? "selected" : ""}>Ticket Create and Update</fw-select-option>
      </fw-select>
    </div>
  `;

  const eventSelect = newDropdownSet.querySelector('.event-name-dropdown');
  if (selectedEvent) {
    eventSelect.value = selectedEvent;
  }

  eventSelect.addEventListener('fwChange', async () => {
    const newEvent = eventSelect.value;
    // Reset the ticketworkflowconditions and the UI when the event name changes
    if (newEvent !== selectedEvent) {
      // Reset entire object
      console.log("ticketworkflowconditions in eventSelect", ticketworkflowconditions, newEvent, selectedEvent);
      // [{
      //   "ticket_workflow_conditions": {
      //     "TicketCreate": {
      //       "combinations": [
      //         {
      //           "isEnabled": true,
      //           "fields": {
      //             "status": "3"
      //           }
      //         }
      //       ]
      //     }
      //   }
      // }]
      const rule = ticketworkflowconditions.length;
      ticketworkflowconditions[ruleIndex] = {
        rule,
        event: {
          eventName: newEvent,
          eventValue: newEvent,
          combination: []
        },
        checked: true
      }
      // ticketworkflowconditions = { [newEvent]: { combinations: [{ isEnabled: true, fields: {} }] } };
      console.log("ticketworkflowconditions", ticketworkflowconditions);

      // Remove existing field-related containers and append new ones
      newDropdownSet.querySelectorAll('.field-name-container, .choices-container, .button-container').forEach(container => container.remove());

      const fieldNameContainer = document.createElement('div');
      fieldNameContainer.classList.add('col-md-2', 'field-name-container');
      newDropdownSet.appendChild(fieldNameContainer);

      const choicesContainer = document.createElement('div');
      choicesContainer.classList.add('col-md-2', 'choices-container');
      newDropdownSet.appendChild(choicesContainer);

      const buttonContainer = document.createElement('div');
      buttonContainer.classList.add('col-md-3', 'button-container');
      buttonContainer.style.marginTop = '-25px';
      newDropdownSet.appendChild(buttonContainer);

      // Populate dropdowns with the selected event
      await fieldschoosingvalues(
        newEvent,
        fieldNameContainer,
        choicesContainer,
        buttonContainer,
        newDropdownSet, null, null, obj, ruleIndex, 0);

      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
      console.log("ticketworkflowconditions", ticketworkflowconditions);

    }
  });

  return newDropdownSet;
}

async function initializeEventDropdown(container, obj, ruleIndex) {
  console.log("container, obj, ruleIndex", container, obj, ruleIndex);

  const eventSelect = container.querySelector('.event-name-dropdown');
  const selectedEventValue = eventSelect.value;

  console.log(`initializeEventDropdown - Initial selected event: ${selectedEventValue}`);

  let fieldNameContainer = container.querySelector('.field-name-container');
  let choicesContainer = container.querySelector('.choices-container');
  let buttonContainer = container.querySelector('.button-container');
  let toggleContainer = container.querySelector('.toggle-container');

  if (!fieldNameContainer) {
    fieldNameContainer = document.createElement('div');
    fieldNameContainer.classList.add('col-md-2', 'field-name-container');
    container.appendChild(fieldNameContainer);
  }

  if (!choicesContainer) {
    choicesContainer = document.createElement('div');
    choicesContainer.classList.add('col-md-2', 'choices-container');
    container.appendChild(choicesContainer);
  }

  if (!buttonContainer) {
    buttonContainer = document.createElement('div');
    buttonContainer.classList.add('col-md-3', 'button-container');
    buttonContainer.style.marginTop = '-20px';
    container.appendChild(buttonContainer);
  }

  if (!toggleContainer) {
    toggleContainer = document.createElement('div');
    toggleContainer.classList.add('col-md-2', 'toggle-container');
    toggleContainer.style.position = 'absolute';
    toggleContainer.style.right = '5px';
    container.style.position = 'relative';
    container.appendChild(toggleContainer);
  }

  toggleContainer.style.display = 'flex';
  toggleContainer.style.flexDirection = 'column';
  toggleContainer.style.alignItems = 'center';

  const toggleSwitch = document.createElement('fw-toggle');
  toggleSwitch.setAttribute('size', 'medium');
  toggleSwitch.checked = obj ? obj.checked : true;
  toggleContainer.appendChild(toggleSwitch);

  const deleteButton = document.createElement('fw-button');
  deleteButton.textContent = 'Delete Event';
  deleteButton.setAttribute('color', 'danger');
  deleteButton.style.marginTop = '25px';
  toggleContainer.appendChild(deleteButton);

  console.log("obj", obj);

  if (obj && obj.event.combination.length > 0) {
    const fields = obj.event.combination;
    for (let index = 0; index < fields.length; index++) {
      const element = fields[index];
      for (const [fieldName, fieldValue] of Object.entries(element)) {
        await fieldschoosingvalues(
          selectedEventValue,
          fieldNameContainer,
          choicesContainer,
          buttonContainer,
          container,
          fieldName,
          [fieldValue],
          obj,
          ruleIndex,
          index
        );
      }
    }
  }

  updateDropdownAccessibility(toggleSwitch.checked);

  toggleSwitch.addEventListener('fwChange', (event) => {
    const isChecked = event.target.checked;
    updateDropdownAccessibility(isChecked);
    updateIsEnabledState(selectedEventValue, isChecked);
  });

  deleteButton.addEventListener('click', () => {
    console.log("Delete Event button clicked.");

    const eventContainer = container.closest('.event-container');
    if (eventContainer) {
      const modal = document.getElementById('composition');
      if (modal) {
        modal.setAttribute('is-open', 'true');
        modal.querySelector('fw-modal-title').innerHTML = `<span>Delete Event</span>`;
        modal.querySelector('fw-modal-content').innerHTML = `
          <span>Are you sure you want to delete this event?</span>
        `;

        modal.addEventListener(
          'fwSubmit',
          () => {
            eventContainer.remove();
            console.log("Event container successfully removed from DOM.");

            if (Array.isArray(ticketworkflowconditions)) {
              ticketworkflowconditions.splice(ruleIndex, 1);
              console.log(`Event at index ${ruleIndex} successfully removed from ticketworkflowconditions array.`);
            } else if (ticketworkflowconditions[ruleIndex]) {
              delete ticketworkflowconditions[ruleIndex];
              console.log(`Event at index ${ruleIndex} successfully removed from ticketworkflowconditions object.`);
            }

            console.log("Updated ticketworkflowconditions:", JSON.stringify(ticketworkflowconditions, null, 2));
            showSuccessToast("Event successfully deleted!");
            modal.removeAttribute('is-open');
          },
          { once: true }
        );
      }
    }
  });

  function updateIsEnabledState(selectedEventValue, isChecked) {
    if (!selectedEventValue) {
      console.error("Event is not selected.");
      return;
    }
    let data = {
      ...ticketworkflowconditions[ruleIndex]
    };
    ticketworkflowconditions[ruleIndex] = {
      ...data,
      checked: isChecked
    };

    console.log(`Toggle for ${selectedEventValue} set to ${isChecked ? 'enabled' : 'disabled'}.`);
    console.log(`Updated ticketworkflowconditions after toggle change: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
  }

  function updateDropdownAccessibility(isChecked) {
    const dropdowns = container.querySelectorAll('.choices-dropdown, .field-name-dropdown, .event-name-dropdown');
    dropdowns.forEach(dropdown => {
      dropdown.disabled = !isChecked;
    });

    const buttonContainers = container.querySelectorAll('.button-container');
    buttonContainers.forEach(buttonContainer => {
      const buttons = buttonContainer.querySelectorAll('button, fw-button');
      buttons.forEach(button => {
        button.disabled = !isChecked;
      });
    });
  }
}

async function fieldschoosingvalues(
  selectedEventValue,
  fieldNameContainer,
  choicesContainer,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = null, obj, ruleIndex, fieldIndex) {
  if (!selectedEventValue) {
    console.error("fieldschoosingvalues called with an undefined selectedEventValue.");
    return;
  }

  try {
    let statusResp = await makeApiCall(apiKeyInput1.value, domainInput1.value);

    if (statusResp && statusResp.ticket_fields) {
      let fields = statusResp.ticket_fields.filter(field =>
        field.field_type.startsWith('default_') &&
        field.choices &&
        field.choices.length > 0 &&
        field.name !== "ticket_type"
        // field.required_for_agents
      );

      console.log(`Starting fieldschoosingvalues with selectedEventValue: ${selectedEventValue}`);
      console.log(`Mapping field name: ${selectedFieldName}`);
      console.log(`Mapping choice value: ${selectedChoices}`);

      if (selectedFieldName) {
        const fieldContainer = document.createElement('div');
        fieldContainer.classList.add('field-container');
        fieldNameContainer.appendChild(fieldContainer);

        const choicesDiv = document.createElement('div');
        choicesDiv.classList.add('choices-container');
        choicesContainer.appendChild(choicesDiv);

        await getFieldnamesfrom1stapi(
          fieldContainer,
          fields,
          choicesDiv,
          selectedEventValue,
          buttonContainer,
          container, selectedFieldName, selectedChoices, obj, ruleIndex, fieldIndex);
      } else {
        await getFieldnamesfrom1stapi(
          fieldNameContainer,
          fields,
          choicesContainer,
          selectedEventValue,
          buttonContainer, container, null, null, obj, ruleIndex, fieldIndex);
      }
    } else {
      console.error('No fields found or data not available');
    }
  } catch (error) {
    console.error("Error fetching data for Dropdown:", error);
  }
}

async function getFieldnamesfrom1stapi(
  fieldNameContainer,
  fields,
  choicesContainer,
  selectedEventValue,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = null,
  obj,
  ruleIndex,
  fieldIndex
) {
  if (!selectedEventValue) {
    console.error("Select an event before proceeding.");
    return;
  }


  // Create the field dropdown
  const fieldDropdown = document.createElement('fw-select');
  fieldDropdown.classList.add('field-name-dropdown');
  fieldDropdown.setAttribute('label', 'Ticket Fields');
  fieldDropdown.setAttribute('required', 'true');
  fieldDropdown.setAttribute('placeholder', 'Choose a field');
  fieldDropdown.setAttribute('hint-text', 'Select singular option');

  const selectedFields = Array.from(container.querySelectorAll('.field-name-dropdown'))
    .map((dropdown) => dropdown.value)
    .filter((value) => value);

  fields
    .filter((field) => !selectedFields.includes(field.name)) 
    .forEach((field) => {
      const option = document.createElement('fw-select-option');
      option.setAttribute('value', field.name);
      option.textContent = field.label;
      fieldDropdown.appendChild(option);

      if (selectedFieldName && field.name === selectedFieldName) {
        option.setAttribute('selected', 'selected');
      }
    });


  fieldNameContainer.appendChild(fieldDropdown);

  // Create the buttons
  const deleteButton = document.createElement('fw-button');
  deleteButton.setAttribute('size', 'icon');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = '<fw-icon name="delete" size="20" color="white"></fw-icon>';

  const deleteButtonWrapper = document.createElement('div');
  deleteButtonWrapper.classList.add('delete-button-container', 'mt-5');
  deleteButtonWrapper.appendChild(deleteButton);
  buttonContainer.appendChild(deleteButtonWrapper);

  const existingAddButton = container.querySelector('.add-button');
  if (existingAddButton) {
    existingAddButton.remove();
  }

  const addButton = document.createElement('fw-button');
  addButton.setAttribute('size', 'icon');
  addButton.classList.add('add-button');
  addButton.innerHTML = '<fw-icon name="plus" size="20" color="white"></fw-icon>';
  addButton.style.marginTop = '16px';
  addButton.disabled = true; // Initially disable the Add button

  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    // const buttonWrapper = document.createElement('div');
    // buttonWrapper.classList.add('button-wrapper');
    // buttonWrapper.appendChild(addButton);
    buttonContainer.appendChild(addButton);

    // buttonContainer.appendChild(buttonWrapper);
  }

//   addButton.addEventListener('click', () => {
//     console.log(ticketworkflowconditions[ruleIndex].event);
//     const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
//     createAdditionalDropdowns(container, obj, ruleIndex, newIndex);
//   });


// // Delete Button Logics

// deleteButton.addEventListener('click', () => {
//   console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

//   // Get modal
//   const modal = document.getElementById('composition');
//   if (modal) {
//     modal.setAttribute('is-open', 'true');
//     modal.querySelector('fw-modal-title').innerHTML = `<span>Delete Mapping</span>`;
//     modal.querySelector('fw-modal-content').innerHTML = `
//       <span>Are you sure you want to delete this field mapping?</span>
//     `;

//     // Add event listener for the modal's "Yes" (submit) button
//     modal.addEventListener(
//       'fwSubmit',
//       () => {
//         // If it's the first field in the list, reset instead of deleting
//         if (fieldIndex === 0) {
//           console.log("Resetting the first field and clearing its choices.");

//           fieldDropdown.value = ""; // Clear value
//           fieldDropdown.setAttribute("placeholder", "Choose a field");
//           fieldDropdown.disabled = false; // Allow user to reselect

//           choicesContainer.innerHTML = ""; // Clear inner choices, but retain the container
//           choicesContainer.style.display = "block"; // Ensure it's visible

//           // Update backend JSON
//           const findRule = ticketworkflowconditions[ruleIndex];
//           if (findRule) {
//             const combination = findRule.event.combination;
//             combination[fieldIndex] = { field: null }; // Reset only the field itself

//             ticketworkflowconditions[ruleIndex] = {
//               ...findRule,
//               event: { ...findRule.event, combination },
//             };

//             console.log(
//               `Backend JSON updated after resetting the first field: ${JSON.stringify(
//                 ticketworkflowconditions,
//                 null,
//                 2
//               )}`
//             );
//           }

//           console.log("First field reset and choices cleared, but position retained.");

//           modal.removeAttribute('is-open'); // Close the modal
//           return; // Exit early for the first field
//         }

//         // For other fields, perform DELETE logic
//         const findRule = ticketworkflowconditions[ruleIndex];
//         if (findRule) {
//           // Find the dynamic index of the dropdown in the backend combination
//           const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
//           const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);

//           if (currentDropdownIndex !== -1) {
//             const combination = findRule.event.combination;
//             combination.splice(currentDropdownIndex, 1); // Remove backend combination at the correct index

//             ticketworkflowconditions[ruleIndex] = {
//               ...findRule,
//               event: { ...findRule.event, combination },
//             };

//             console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
//           } else {
//             console.error("Dropdown not found in the container. Backend update skipped.");
//           }
//         }

//         // UI Cleanup: Remove field dropdown, choices, and delete button
//         fieldNameContainer.removeChild(fieldDropdown);
//         choicesContainer.innerHTML = ""; // Clear the choices
//         buttonContainer.removeChild(deleteButtonWrapper);

//         // Handle remaining dropdowns in the UI
//         const remainingDropdowns = container.querySelectorAll(".field-name-dropdown");

//         if (remainingDropdowns.length === 0) {
//   // Ensure Add button is in the buttonContainer when no dropdowns are left
//   console.log("No remaining dropdowns, placing Add button in existing container.");
//   if (!buttonContainer.querySelector(".add-button")) {
//     addButton.disabled = false; // Enable the Add button
//     buttonContainer.appendChild(addButton);
//   }
// } else {
//   // Add button to the last dropdown's button container
//   console.log("Dropdowns still exist—placing Add button next to the last dropdown.");
//   const lastDropdownWrapper = remainingDropdowns[remainingDropdowns.length - 1].closest(".button-container");
//   if (lastDropdownWrapper && !lastDropdownWrapper.contains(addButton)) {
//     addButton.disabled = false; // Force-enable Add button here!
//     lastDropdownWrapper.appendChild(addButton);
//   }

//   // Additional logic: Enable "Add" button dynamically based on the previous dropdown's value
//   const lastDropdown = remainingDropdowns[remainingDropdowns.length - 1];
//   if (lastDropdown.value === "" || lastDropdown.disabled) {
//     console.log("Last dropdown is either not selected or disabled. Disabling Add button.");
//     addButton.disabled = true;
//   } else {
//     console.log("Previous dropdown has been selected. Enabling Add button.");
//     addButton.disabled = false;
//   }
// }

//         console.log(`Field at index ${fieldIndex} deleted successfully.`);

//         modal.removeAttribute('is-open'); // Close the modal
//       },
//       { once: true } // Ensure the listener is executed only once
//     );

//     // Add event listener to close the modal if "No" is clicked
//     modal.querySelector("fw-modal-footer").addEventListener(
//       "fwClose",
//       () => {
//         modal.removeAttribute("is-open"); // Close modal
//         console.log("Delete operation was cancelled.");
//       },
//       { once: true }
//     );
//   } else {
//     console.error("Modal element with ID 'composition' not found.");
//   }
// });



//   // Field Dropdown Handling
//   fieldDropdown.addEventListener('fwChange', async (event) => {
//     const newSelectedFieldName = event.target.value;

//     addButton.disabled = false; // Enable the Add button when a field is selected

//     choicesContainer.innerHTML = '';

//     const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
//     if (newSelectedField) {
//       const findRule = ticketworkflowconditions[ruleIndex];
//       if (findRule) {
//         const combination = findRule.event.combination;

//         const newKeyValue = { [newSelectedFieldName]: null };
//         combination.splice(fieldIndex, 1, newKeyValue);

//         if (combination)
//           console.log(`Field changed. Updated backend: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
//       }

//       await showingitschoices(
//         choicesContainer,
//         newSelectedField,
//         selectedEventValue,
//         newSelectedFieldName,
//         buttonContainer,
//         container,
//         fieldNameContainer,
//         null,
//         obj,
//         ruleIndex,
//         fieldIndex
//       );

//       console.log(`Field changed to: ${newSelectedFieldName}`);
//     } else {
//       console.error("Field not found in Dropdown");
//     }
//   });



addButton.addEventListener("click", () => {
  console.log(ticketworkflowconditions[ruleIndex].event);
  const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
  createAdditionalDropdowns(container, obj, ruleIndex, newIndex);

  // Dynamically update Add Button visibility after adding a dropdown
  checkAddButtonVisibility();
});



// Delete Button Logics
deleteButton.addEventListener("click", () => {
  console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

  // Get modal
  const modal = document.getElementById("composition");
  if (modal) {
    modal.setAttribute("is-open", "true");
    modal.querySelector("fw-modal-title").innerHTML = `<span>Delete Mapping</span>`;
    modal.querySelector("fw-modal-content").innerHTML = `
      <span>Are you sure you want to delete this field mapping?</span>
    `;

    // Add event listener for the modal's "Yes" (submit) button
    modal.addEventListener(
      "fwSubmit",
      () => {
        // If it's the first field in the list, reset instead of deleting
        if (fieldIndex === 0) {
          console.log("Resetting the first field and clearing its choices.");

          fieldDropdown.value = ""; // Clear value
          fieldDropdown.setAttribute("placeholder", "Choose a field");
          fieldDropdown.disabled = false; // Allow user to reselect

          choicesContainer.innerHTML = ""; // Clear inner choices, but retain the container
          choicesContainer.style.display = "block"; // Ensure it's visible

          // Update backend JSON
          const findRule = ticketworkflowconditions[ruleIndex];
          if (findRule) {
            const combination = findRule.event.combination;
            combination[fieldIndex] = { field: null }; // Reset the specific field

            ticketworkflowconditions[ruleIndex] = {
              ...findRule,
              event: { ...findRule.event, combination },
            };
          }

          modal.removeAttribute("is-open"); // Close the modal
          // Dynamically recheck after resetting
          checkAddButtonVisibility();
          return; // Exit early for the first field
        }

        // For other fields, perform DELETE logic
        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
          const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
          const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);

          if (currentDropdownIndex !== -1) {
            const combination = findRule.event.combination;
            combination.splice(currentDropdownIndex, 1); // Remove the combination at the correct index

            ticketworkflowconditions[ruleIndex] = {
              ...findRule,
              event: { ...findRule.event, combination },
            };
          }
        }

        // UI Cleanup: Remove field dropdown, choices, and delete button
        fieldNameContainer.removeChild(fieldDropdown);
        choicesContainer.innerHTML = ""; // Clear the choices container
        buttonContainer.removeChild(deleteButtonWrapper);

        modal.removeAttribute("is-open"); // Close the modal

        // Dynamically recheck Add Button visibility after a field is deleted
        checkAddButtonVisibility();
      },
      { once: true } // Listener should execute only once
    );

    modal.querySelector("fw-modal-footer").addEventListener(
      "fwClose",
      () => {
        modal.removeAttribute("is-open"); // Close modal
        console.log("Delete operation was cancelled.");
      },
      { once: true }
    );
  } else {
    console.error("Modal element with ID 'composition' not found.");
  }
});



// Field Dropdown Handling
fieldDropdown.addEventListener("fwChange", async (event) => {
  const newSelectedFieldName = event.target.value;

  choicesContainer.innerHTML = ""; // Clear previous choices

  const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
  if (newSelectedField) {
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
      const combination = findRule.event.combination;

      const newKeyValue = { [newSelectedFieldName]: null };
      combination.splice(fieldIndex, 1, newKeyValue);

      if (combination) {
        console.log(`Field changed. Updated backend:`, ticketworkflowconditions);
      }
    }

    await showingitschoices(
      choicesContainer,
      newSelectedField,
      selectedEventValue,
      newSelectedFieldName,
      buttonContainer,
      container,
      fieldNameContainer,
      null,
      obj,
      ruleIndex,
      fieldIndex
    );

    console.log(`Field changed to: ${newSelectedFieldName}`);
  } else {
    console.error("Field not found in the Dropdown");
  }

  // Check Add Button visibility dynamically when a dropdown value changes
  checkAddButtonVisibility();
});

// Function to Check Add Button Visibility
function checkAddButtonVisibility() {
  const dropdowns = container.querySelectorAll(".field-name-dropdown");
  const selectedFieldValues = Array.from(dropdowns)
    .map((dropdown) => dropdown.value)
    .filter((value) => value !== ""); 

  const areAllFieldsSelected = selectedFieldValues.length >= fields.length;

  const lastDropdownWrapper =
    dropdowns.length > 0
      ? dropdowns[dropdowns.length - 1].closest(".button-container")
      : null;

  // If all fields are selected, remove the Add Button
  if (areAllFieldsSelected) {
    console.log("All fields are selected. Hiding Add Button.");
    if (addButton.parentNode) {
      addButton.parentNode.appendChild(addButton);
      addButton.disabled = false; 
      // addButton.style.visibility = "hidden";
    }
  } else {
    console.log("Fields are still available. Add Button will be shown.");
    
    if (dropdowns.length > 0 && lastDropdownWrapper) {
      if (!lastDropdownWrapper.contains(addButton)) {
        lastDropdownWrapper.appendChild(addButton); 
        addButton.style.visibility = "visible";
      }
    }

    addButton.disabled = false; 
  }

  
}





  // Existing mapping
  if (selectedFieldName) {
    const selectedField = fields.find((field) => field.name === selectedFieldName);
    if (selectedField) {
      await showingitschoices(
        choicesContainer,
        selectedField,
        selectedEventValue,
        selectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        selectedChoices,
        obj,
        ruleIndex,
        fieldIndex
      );

      const findRule = ticketworkflowconditions[ruleIndex];
      const combination = findRule.combination;
      const newKeyValue = { [selectedFieldName]: selectedChoices ? selectedChoices[0] : null };
      combination.splice(fieldIndex, 1, newKeyValue);
      ticketworkflowconditions[ruleIndex] = { ...findRule, combination };

      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  }





}

async function showingitschoices(
  choicesContainer,
  selectedField,
  selectedEventValue,
  selectedFieldName,
  buttonContainer,
  container,
  fieldNameContainer,
  selectedChoices = null, obj, ruleIndex, fieldIndex
) {
  choicesContainer.innerHTML = '';

  const choicesDropdown = document.createElement('fw-select');
  choicesDropdown.classList.add('choices-dropdown');
  choicesDropdown.setAttribute('label', `${selectedFieldName}`);
  choicesDropdown.setAttribute('required', 'true');
  choicesDropdown.setAttribute('placeholder', `Choose ${selectedFieldName}`);
  choicesDropdown.setAttribute('hint-text', 'Select singular option');

  selectedField.choices.forEach(choice => {
    const option = document.createElement('fw-select-option');
    option.setAttribute('value', choice.id);
    option.textContent = choice.value;
    choicesDropdown.appendChild(option);

    if (selectedChoices && selectedChoices.includes(String(choice.id))) {
      option.setAttribute('selected', 'selected');
    }
  });

  choicesContainer.appendChild(choicesDropdown);

  // // Check if the button has already been added
  // if (!buttonContainer.querySelector('fw-button[color="primary"]')) {
  //   const addButton = document.createElement('fw-button');
  //   addButton.textContent = 'Add';
  //   addButton.setAttribute('color', 'primary');
  //   buttonContainer.appendChild(addButton);

  //   addButton.addEventListener('click', () => {
  //     createAdditionalDropdowns(container, obj, ruleIndex, fieldIndex + 1);
  //   });
  // }

  // // Check if the danger button has already been added
  // if (!buttonContainer.querySelector('fw-button[color="danger"]')) {
  //   const space = document.createTextNode(' ');
  //   buttonContainer.appendChild(space);

  //   const deleteButton = document.createElement('fw-button');
  //   deleteButton.textContent = 'Delete';
  //   deleteButton.setAttribute('color', 'danger');
  //   buttonContainer.appendChild(deleteButton);

  //   deleteButton.addEventListener('click', () => {
  //     // Reset the first dropdown field container and remove choices container
  //     if (fieldIndex === 0) {
  //       fieldNameContainer.innerHTML = ''; // Reset the field dropdown
  //       choicesContainer.innerHTML = ''; // Reset the choices container
  //     } else {
  //       fieldNameContainer.remove();
  //       choicesContainer.remove();
  //       buttonContainer.remove();
  //       const findRule = ticketworkflowconditions[ruleIndex];
  //       findRule.event.combination.splice(fieldIndex, 1); // Remove this combination from the backend
  //     }
  //   });
  // }

  choicesDropdown.addEventListener('fwChange', (event) => {
    const selectedChoiceId = event.target.value;

    // if (!ticketworkflowconditions[selectedEventValue]) {
    //   ticketworkflowconditions[selectedEventValue] = { combinations: [{ isEnabled: true, fields: {} }] };
    // }
    // if(selectedEventValue){
    // Update JSON directly with selected field and choice
    const findRule = ticketworkflowconditions[ruleIndex];
    const combination = findRule.event.combination;
    const newKeyValue = { [selectedFieldName]: selectedChoiceId ? selectedChoiceId : null };
    combination.splice(fieldIndex, 1, newKeyValue);
    // ticketworkflowconditions[ruleIndex] = {...findRule, combination};
    // }

    // let combination = ticketworkflowconditions[selectedEventValue].combinations[0];
    // combination.fields[selectedFieldName] = selectedChoiceId;

    console.log(`Updated JSON with field: ${selectedFieldName}, choice: ${selectedChoiceId}`);
    console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);

  });
}

function createAdditionalDropdowns(container, obj, ruleIndex, fieldIndex, fields) {
  const fieldNameContainer = document.createElement('div');
  fieldNameContainer.classList.add('col-md-2', 'field-name-container', 'offset-md-2');
  const choicesContainer = document.createElement('div');
  choicesContainer.classList.add('col-md-2', 'choices-container');
  const buttonContainer = document.createElement('div');
  buttonContainer.classList.add('col-md-3', 'button-container');
  buttonContainer.style.marginTop = '-23px';

  container.appendChild(fieldNameContainer);
  container.appendChild(choicesContainer);
  container.appendChild(buttonContainer);

  fieldschoosingvalues(
    container.querySelector('.event-name-dropdown').value,
    fieldNameContainer,
    choicesContainer,
    buttonContainer,
    container,
    null,
    null,
    obj,
    ruleIndex,
    fieldIndex,
    fields
  );



}