"use strict";

(() => {
  const builder = document.querySelector("[data-custom-placeholder-builder]");
  const list = builder?.querySelector("[data-custom-placeholder-list]");
  if (!builder || !list) return;

  const createRow = () => {
    const row = document.createElement("div");
    row.className = "custom-placeholder-row";
    row.dataset.customPlaceholderRow = "";
    row.innerHTML = `
      <label>Name<span class="hint">Starts with custom.</span><div class="input-prefix"><span>custom.</span><input name="custom_placeholder_name" placeholder="stream.title"></div></label>
      <label>Value<textarea name="custom_placeholder_value" rows="2" maxlength="2000"></textarea></label>
      <label>Who may receive it<select name="custom_placeholder_visibility"><option value="user">Users and staff</option><option value="mod">Moderators and admins</option><option value="admin">Admins only</option></select></label>
      <label>Description<input name="custom_placeholder_description" maxlength="240" placeholder="Where this value should be used"></label>
      <button type="button" class="button danger" data-custom-placeholder-remove>Remove</button>`;
    list.append(row);
    row.querySelector("input")?.focus();
  };

  builder.querySelector("[data-custom-placeholder-add]")?.addEventListener("click", createRow);
  builder.addEventListener("click", (event) => {
    const remove = event.target.closest("[data-custom-placeholder-remove]");
    if (!remove || !builder.contains(remove)) return;
    remove.closest("[data-custom-placeholder-row]")?.remove();
  });
})();
