const switchListEl = document.querySelector("#switch-list");
const submitEl = document.querySelector("#submit");

let fronters = (window.fronters = []);

const memberFromButton = (button) => ({
  name: button.dataset.name,
  uuid: button.dataset.uuid,
});

const updateForm = (member) => {
  const elementPrefix = fronters.length == 1 ? "pf-fronter__" : "pf-backups__";
  const inputEl = document.querySelector(`#${elementPrefix}${member.uuid}`);
  inputEl.checked = true;

  if (fronters.length > 0) {
    submitEl.disabled = false;
  }
};

const updateList = () => {
  switchListEl.innerHTML = fronters
    .map((member) => `<span>${member.name}</span>`)
    .join(", ");
};

const handleButtonClick = (event) => {
  const button = event.target;
  const member = memberFromButton(button);

  if (fronters.find((mem) => mem.uuid == member.uuid)) {
    console.info("already picked, skipping");
    return;
  }

  fronters = [...fronters, member];

  // update form
  updateForm(member);

  // update list
  updateList();

  if (fronters.length == 1) {
    button.classList.add("first");
  } else {
    button.classList.add("other");
  }
};

const reset = () => {
  submitEl.disabled = true;
  document.querySelectorAll("input").forEach((el) => {
    el.checked = false;
  });
};

(() => {
  document.querySelectorAll(".buttons").forEach((el) => {
    el.addEventListener("click", handleButtonClick);
  });

  reset();
})();