let partySize = 0;

function createNewMember(id) {
  const memberDiv = document.createElement("div");
  memberDiv.classList.add("member");

  const innerDiv = document.createElement("div");

  const nameP = document.createElement("p");

  const nameLabel = document.createElement("label");
  nameLabel.htmlFor = `name-${id}`;
  nameLabel.innerHTML = "Name:";

  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.id = `name-${id}`;
  nameInput.name = `name-${id}`;
  nameInput.required = true;

  nameP.appendChild(nameLabel);
  nameP.appendChild(nameInput);

  const childP = document.createElement("p");

  const childLabel = document.createElement("label");
  childLabel.htmlFor = `child-${id}`;
  childLabel.innerHTML = "Child:";

  const childInput = document.createElement("input");
  childInput.type = "checkbox";
  childInput.id = `child-${id}`;
  childInput.name = `child-${id}`;

  childP.appendChild(childLabel);
  childP.appendChild(childInput);

  innerDiv.appendChild(nameP);
  innerDiv.appendChild(childP);

  const dietP = document.createElement("p");

  const dietLabel = document.createElement("label");
  dietLabel.htmlFor = `diet-${id}`;
  dietLabel.innerHTML = "Dietary preferences:";

  const dietInput = document.createElement("textarea");
  dietInput.id = `diet-${id}`;
  dietInput.name = `dietaryPreferences-${id}`;

  dietP.appendChild(dietLabel);
  dietP.appendChild(dietInput);

  memberDiv.appendChild(innerDiv);
  memberDiv.appendChild(dietP);

  document.querySelector("div.members").appendChild(memberDiv);
}

function updatePartySize(newPartySize) {
  if (newPartySize > partySize) {
    for (let i = partySize; i < newPartySize; i++) {
      createNewMember(partySize);
    }
  } else if (newPartySize < partySize) {
    for (let i = partySize; i > newPartySize; i--) {
      document.querySelector("div.members").lastChild.remove();
    }
  }
  partySize = newPartySize;
}

window.onload = function () {
  const partySizeDropdown = document.querySelector("select#party-size");
  partySizeDropdown.addEventListener("change", () => {
    updatePartySize(Number.parseInt(partySizeDropdown.value));
  });
  updatePartySize(1);
};