Do This !!!!!!!!!!!!!

understand this i choosed ticketcreate and its choices. Now the json will look like this .


{
  "TicketCreate": {
    "combinations": [
      {
        "isEnabled": true,
        "fields": {
          "status": "2",
          "priority": "2"
        }
      }
    ]
  }
}


 if i want another combo with same event, i will click addnewrule and choose ticketcreate, then choosing field and choices. it should add as new combination . now the json should view like this.


{
  "TicketCreate": {
    "combinations": [
      {
        "isEnabled": true,
        "fields": {
          "status": "2",
          "priority": "2"
        }
      },
      {
        "isEnabled": true,
        "fields": {
          "status": "4",
          "priority": "3"
        }
      }
    ]
  }
}


on Remapping of Multiple Combinations for Same event, DO this 

how many combinations are there that much time create event dropdown and match each set of combinations mapp to dropdown and same add to object as done already in this code

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;

    if (!ticketworkflowconditions[newEvent]) {
      ticketworkflowconditions[newEvent] = { combinations: [] };
    }

    if (!ticketworkflowconditions[newEvent].combinations.length) {
      ticketworkflowconditions[newEvent].combinations.push({ isEnabled: true, fields: {} });
    }

    
    const fieldNameContainer = newDropdownSet.querySelector('.field-name-container');
    const choicesContainer = newDropdownSet.querySelector('.choices-container');
    const buttonContainer = newDropdownSet.querySelector('.button-container');

    await fieldschoosingvalues(newEvent, fieldNameContainer, choicesContainer, 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');

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

    // Set the option as selected if it matches the pre-selected choices
    if (selectedChoices && selectedChoices.includes(String(choice.id))) {
      option.setAttribute('selected', 'selected');
    }
  });

  // Append the populated choices dropdown to the choices container
  choicesContainer.appendChild(choicesDropdown);

  // Check if the 'Add' button already exists before adding it
  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);
    });
  }

  // Add event listener to update the JSON whenever a choice is selected
  choicesDropdown.addEventListener('fwChange', (event) => {
    const selectedChoiceId = event.target.value;

    // Initialize ticketworkflowconditions if it doesn't exist
    if (!ticketworkflowconditions[selectedEventValue]) {
      ticketworkflowconditions[selectedEventValue] = { combinations: [{ isEnabled: true, fields: {} }] };
    }

    // Get the first combination object and update the fields with the selected choice
    let combination = ticketworkflowconditions[selectedEventValue].combinations[0];
    combination.fields[selectedFieldName] = selectedChoiceId;

    // Log the update to the console for verification
    console.log(`Updated JSON with field: ${selectedFieldName}, choice: ${selectedChoiceId}`);
    console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
  });
}

function createAdditionalDropdowns(container) {
  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', 'mt-3');

  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.classList.add('btn', 'btn-danger', 'mt-2');
  buttonContainer.appendChild(deleteButton);

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

  fieldschoosingvalues(
    container.querySelector('.event-name-dropdown').value,
    fieldNameContainer,
    choicesContainer,
    buttonContainer,
    container
  );

  deleteButton.addEventListener('click', () => {
    fieldNameContainer.remove();
    choicesContainer.remove();
    buttonContainer.remove();
  });
}