add this feature : 

If i have clicked addNew rule butotn and choosed ticket create option for example. now if i change the dropdown to other event the existing value mapped / it is empty, it should reset whole and it should show just field dropdown alone. also it should remove the values as well from the json 

async function createEventDropdownSet(eventName) {
  console.log("Creating Event Dropdown");

  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

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

  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;

    // Only update the conditions if the event name has actually changed
    if (newEvent !== selectedEvent) {
      // If the event doesn't already exist, add a new event
      if (!ticketworkflowconditions[newEvent]) {
        ticketworkflowconditions[newEvent] = { combinations: [{ isEnabled: true, fields: {} }] };
      } else {
        // If the event already exists, reset its fields
        ticketworkflowconditions[newEvent].combinations[0].fields = {};
      }

      // Now that we've updated ticketworkflowconditions, ensure that we update the UI as well
      // Clear existing field-related containers to avoid duplicate dropdowns
      const existingFieldNameContainer = newDropdownSet.querySelector('.field-name-container');
      const existingChoicesContainer = newDropdownSet.querySelector('.choices-container');
      const existingButtonContainer = newDropdownSet.querySelector('.button-container');

      if (existingFieldNameContainer) {
        existingFieldNameContainer.innerHTML = '';  // Clear contents
      } else {
        const fieldNameContainer = document.createElement('div');
        fieldNameContainer.classList.add('col-md-2', 'field-name-container');
        newDropdownSet.appendChild(fieldNameContainer);
      }

      if (existingChoicesContainer) {
        existingChoicesContainer.innerHTML = '';  // Clear contents
      } else {
        const choicesContainer = document.createElement('div');
        choicesContainer.classList.add('col-md-2', 'choices-container');
        newDropdownSet.appendChild(choicesContainer);
      }

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

      // Call the function to populate the dropdowns with the selected event
      await fieldschoosingvalues(newEvent, existingFieldNameContainer || fieldNameContainer, existingChoicesContainer || choicesContainer, existingButtonContainer || buttonContainer, newDropdownSet);

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

  return newDropdownSet;
}

async function initializeEventDropdown(container, fieldMappings = null) {
  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 = '25px';
    container.appendChild(buttonContainer);
  }

  if (!toggleContainer) {
    toggleContainer = document.createElement('div');
    toggleContainer.classList.add('col-md-2', 'toggle-container');
    toggleContainer.style.marginLeft = 'auto';
    toggleContainer.style.marginRight = '5px';
    toggleContainer.style.marginTop = '30px';
    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 = fieldMappings?.combinations[0]?.isEnabled || false;
  toggleContainer.appendChild(toggleSwitch);
  
  const deleteButton = document.createElement('fw-button');
  deleteButton.textContent = 'Delete Event';
  deleteButton.setAttribute('color', 'danger');
  deleteButton.style.marginTop = '15px';
  toggleContainer.appendChild(deleteButton);

  if (fieldMappings && fieldMappings.combinations.length > 0) {
    const fields = fieldMappings.combinations[0].fields;
    for (const [fieldName, fieldValue] of Object.entries(fields)) {
      await fieldschoosingvalues(selectedEventValue, fieldNameContainer, choicesContainer, buttonContainer, container, fieldName, [fieldValue]);
    }
  }

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

  deleteButton.addEventListener('click', () => {
    const eventContainer = container.closest('.event-container');
    if (eventContainer) {
      eventContainer.remove();
      delete ticketworkflowconditions[selectedEventValue];
      console.log("Delete Event button clicked. Event removed from DOM and ticketworkflowconditions.");
    }
  });

  updateIsEnabledState(selectedEventValue, toggleSwitch.checked); // Initial state capture

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

  function updateIsEnabledState(selectedEventValue, isChecked) {
    if (!selectedEventValue) {
      console.error("Event is not selected.");
      return;
    }

    if (!ticketworkflowconditions[selectedEventValue]) {
      ticketworkflowconditions[selectedEventValue] = { combinations: [{ isEnabled: isChecked, fields: {} }] };
    }

    let combination = ticketworkflowconditions[selectedEventValue].combinations[0];
    combination.isEnabled = isChecked;

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

async function fieldschoosingvalues(selectedEventValue, fieldNameContainer, choicesContainer, buttonContainer, container, selectedFieldName = null, selectedChoices = null) {
  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.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);
      } else {
        await getFieldnamesfrom1stapi(fieldNameContainer, fields, choicesContainer, selectedEventValue, buttonContainer, container);
      }
    } 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) {
  if (!selectedEventValue) {
      console.error("Select an event before proceeding.");
      return;
  }

  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');

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

      // Set the initial selected field if provided
      if (selectedFieldName && field.name === selectedFieldName) {
          option.setAttribute('selected', 'selected');
      }
  });

  fieldNameContainer.appendChild(fieldDropdown);

  // Initial mapping of choices in case a field is already selected
  if (selectedFieldName) {
      const selectedField = fields.find(field => field.name === selectedFieldName);
      if (selectedField) {
          await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices);

          // Update JSON directly with selected field and choice
          ticketworkflowconditions[selectedEventValue] = ticketworkflowconditions[selectedEventValue] || { combinations: [{ isEnabled: true, fields: {} }] };
          ticketworkflowconditions[selectedEventValue].combinations[0].fields[selectedFieldName] = selectedChoices ? selectedChoices[0] : null;
          console.log(`Updated ticketworkflowconditions with mapped fields: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
      } else {
          console.error('Field not found in Dropdown');
      }
  }

  fieldDropdown.addEventListener('fwChange', async (event) => {
      const newSelectedFieldName = event.target.value;
      choicesContainer.innerHTML = '';

      const newSelectedField = fields.find(field => field.name === newSelectedFieldName);
      if (newSelectedField) {
          await showingitschoices(choicesContainer, newSelectedField, selectedEventValue, newSelectedFieldName, buttonContainer, container, fieldNameContainer);

          // Update JSON with newly selected field and choice
          const choiceValue = choicesContainer.querySelector('.choices-dropdown')?.value || null;
          ticketworkflowconditions[selectedEventValue].combinations[0].fields[newSelectedFieldName] = choiceValue;
          console.log(`Field changed: ${newSelectedFieldName}, Choice: ${choiceValue}`);
          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
) {
  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('.btn-primary')) {
    const addButton = document.createElement('button');
    addButton.textContent = 'Add';
    addButton.classList.add('btn', 'btn-primary', 'mt-2');
    buttonContainer.appendChild(addButton);

    addButton.addEventListener('click', () => {
      createAdditionalDropdowns(container);
    });
  }

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

    if (!ticketworkflowconditions[selectedEventValue]) {
      ticketworkflowconditions[selectedEventValue] = { combinations: [{ isEnabled: true, fields: {} }] };
    }

    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)}`);
  });
}