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"
}
}
]
}
}

now in this mapping : how many combinations are there for a event, that much time you have to create event

for example in this TicketCreate , combination -2, that means

1st set of dropdown - Event (Ticket Create) - 1st combination of fields and choices,
{
"isEnabled": true,
"fields": {
"status": "2",
"priority": "2"
}

then 2nd set of dropdown - Event (Ticket Create) - 2nd set of combination of fields and choices

{
"isEnabled": true,
"fields": {
"status": "4",
"priority": "3"
}
}

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) {
showErrorToast("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);


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

fieldNameContainer.appendChild(fieldDropdown);

if (selectedFieldName) {
const selectedField = fields.find(field => field.name === selectedFieldName);
if (selectedField) {
await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices);
} else {
showErrorToast('Field not found in Dropdown');
}
}

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


const selectedField = fields.find(field => field.name === selectedFieldName);
if (selectedField) {
  await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer);
} else {
  showErrorToast('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)}`);
});
}

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