script.js

const state = {
  mode: "static",
};

const form = document.getElementById("badge-form");
const modeButtons = Array.from(document.querySelectorAll(".mode-button"));
const sections = Array.from(document.querySelectorAll(".form-section"));
const preview = document.getElementById("badge-preview");
const previewStatus = document.getElementById("preview-status");
const badgeUrl = document.getElementById("badge-url");
const copyButton = document.getElementById("copy-button");
const logoInputs = Array.from(document.querySelectorAll("[data-logo-input]"));
const logoLists = new Map(Array.from(document.querySelectorAll("[data-logo-list]")).map((node) => [node.dataset.logoList, node]));
const simpleIconsUrl = "./data/simple-icons.json";
const simpleIconsState = {
  icons: [],
  loaded: false,
  loading: false,
  promise: null,
};

function readText(formData, key) {
  return String(formData.get(key) || "").trim();
}

function readInputValue(formData, key) {
  const field = form.elements.namedItem(key);
  const value = readText(formData, key);
  if (value) {
    return value;
  }

  return field && "placeholder" in field ? field.placeholder.trim() : "";
}

function encodedSegment(value) {
  return encodeURIComponent(value);
}

function appendIfPresent(params, key, value) {
  if (value) {
    params.set(key, value);
  }
}

function normalizeSearchText(value) {
  return value.toLowerCase().replace(/[^a-z0-9]+/g, "");
}

async function ensureSimpleIconsLoaded() {
  if (simpleIconsState.loaded) {
    return;
  }

  if (simpleIconsState.loading && simpleIconsState.promise) {
    await simpleIconsState.promise;
    return;
  }

  simpleIconsState.loading = true;
  simpleIconsState.promise = (async () => {
    try {
      const response = await fetch(simpleIconsUrl);
      if (!response.ok) {
        throw new Error(`Failed to load icons: ${response.status}`);
      }
      const payload = await response.json();
      const icons = Array.isArray(payload) ? payload : payload.icons;
      simpleIconsState.icons = (icons || []).map((icon) => ({
        title: icon.title,
        slug: icon.slug,
        hex: icon.hex,
        search: normalizeSearchText(`${icon.title} ${icon.slug}`),
      }));

      if (!simpleIconsState.icons.length) {
        throw new Error("No icons loaded");
      }

      simpleIconsState.loaded = true;
      if (previewStatus.textContent === "Logo suggestions could not load.") {
        previewStatus.textContent = "";
      }
    } catch (_error) {
      simpleIconsState.icons = [];
      previewStatus.textContent = "Logo suggestions could not load.";
    } finally {
      simpleIconsState.loading = false;
      simpleIconsState.promise = null;
    }
  })();

  await simpleIconsState.promise;
}

function clearLogoSuggestions(mode) {
  const list = logoLists.get(mode);
  const input = document.querySelector(`[data-logo-input="${mode}"]`);
  if (!list || !input) {
    return;
  }

  list.innerHTML = "";
  list.hidden = true;
  input.setAttribute("aria-expanded", "false");
}

function renderLogoSuggestions(mode, icons) {
  const list = logoLists.get(mode);
  const input = document.querySelector(`[data-logo-input="${mode}"]`);
  if (!list || !input) {
    return;
  }

  list.innerHTML = "";

  if (!icons.length) {
    list.hidden = true;
    input.setAttribute("aria-expanded", "false");
    return;
  }

  icons.forEach((icon) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "logo-option";

    const swatch = document.createElement("img");
    swatch.className = "logo-option-icon";
    swatch.alt = "";
    swatch.src = `https://cdn.simpleicons.org/${encodeURIComponent(icon.slug)}/${encodeURIComponent(icon.hex)}`;

    const textWrap = document.createElement("span");
    textWrap.className = "logo-option-meta";

    const label = document.createElement("span");
    label.className = "logo-option-text";
    label.textContent = icon.title;

    const slug = document.createElement("span");
    slug.className = "logo-option-slug";
    slug.textContent = icon.slug;

    textWrap.append(label, slug);
    button.append(swatch, textWrap);
    button.addEventListener("mousedown", (event) => {
      event.preventDefault();
    });
    button.addEventListener("click", () => {
      input.value = icon.slug;
      clearLogoSuggestions(mode);
      render();
      input.focus();
    });

    list.append(button);
  });

  list.hidden = false;
  input.setAttribute("aria-expanded", "true");
}

async function updateLogoSuggestions(input) {
  const mode = input.dataset.logoInput;
  const search = normalizeSearchText(input.value);

  if (!search) {
    clearLogoSuggestions(mode);
    return;
  }

  await ensureSimpleIconsLoaded();
  const matches = simpleIconsState.icons
    .filter((icon) => icon.search.includes(search))
    .slice(0, 8);

  renderLogoSuggestions(mode, matches);
}

function buildStaticBadgeUrl(formData) {
  const label = readInputValue(formData, "label");
  const message = readText(formData, "message");
  const labelColor = readText(formData, "labelColor");
  const color = readInputValue(formData, "color");
  const isSingleSegment = !message;
  const effectiveColor = isSingleSegment ? (labelColor || color) : color;

  if (!effectiveColor || !label) {
    return {
      status: "Enter label text and a color to preview a static badge.",
      url: "",
    };
  }

  const params = new URLSearchParams();
  if (!isSingleSegment) {
    appendIfPresent(params, "labelColor", labelColor);
  }
  appendIfPresent(params, "style", readText(formData, "style"));
  appendIfPresent(params, "logo", readInputValue(formData, "logo"));
  appendIfPresent(params, "logoColor", readInputValue(formData, "logoColor"));

  const pathParts = message ? [label, message, effectiveColor] : [label, effectiveColor];
  const path = pathParts.map(encodedSegment).join("-");
  const baseUrl = `https://img.shields.io/badge/${path}`;
  const query = params.toString();

  return {
    status: "",
    url: query ? `${baseUrl}?${query}` : baseUrl,
  };
}

function buildDynamicBadgeUrl(formData) {
  const format = readText(formData, "dynamicFormat") || "json";
  const url = readInputValue(formData, "url");
  const query = readInputValue(formData, "query");

  const params = new URLSearchParams();
  appendIfPresent(params, "url", url);
  appendIfPresent(params, "query", query);
  appendIfPresent(params, "label", readInputValue(formData, "dynamicLabel"));
  appendIfPresent(params, "prefix", readInputValue(formData, "prefix"));
  appendIfPresent(params, "suffix", readInputValue(formData, "suffix"));
  appendIfPresent(params, "color", readInputValue(formData, "dynamicColor"));
  appendIfPresent(params, "labelColor", readInputValue(formData, "dynamicLabelColor"));
  appendIfPresent(params, "style", readText(formData, "dynamicStyle"));
  appendIfPresent(params, "logo", readInputValue(formData, "dynamicLogo"));
  appendIfPresent(params, "logoColor", readInputValue(formData, "dynamicLogoColor"));

  return {
    status: "",
    url: `https://img.shields.io/badge/dynamic/${encodedSegment(format)}.svg?${params.toString()}`,
  };
}

function render() {
  const formData = new FormData(form);
  const result = state.mode === "static"
    ? buildStaticBadgeUrl(formData)
    : buildDynamicBadgeUrl(formData);

  badgeUrl.textContent = result.url;
  previewStatus.textContent = result.status;
  preview.src = result.url;
  preview.hidden = !result.url;
  copyButton.disabled = !result.url;
}

function setMode(mode) {
  state.mode = mode;

  modeButtons.forEach((button) => {
    const isActive = button.dataset.mode === mode;
    button.classList.toggle("is-active", isActive);
    button.setAttribute("aria-selected", String(isActive));
  });

  sections.forEach((section) => {
    section.classList.toggle("is-hidden", section.dataset.section !== mode);
  });

  render();
}

modeButtons.forEach((button) => {
  button.addEventListener("click", () => setMode(button.dataset.mode));
});

logoInputs.forEach((input) => {
  input.addEventListener("focus", () => {
    updateLogoSuggestions(input);
  });
  input.addEventListener("input", () => {
    updateLogoSuggestions(input);
  });
  input.addEventListener("blur", () => {
    window.setTimeout(() => clearLogoSuggestions(input.dataset.logoInput), 120);
  });
});

form.addEventListener("input", render);
form.addEventListener("change", render);

document.addEventListener("click", (event) => {
  if (!event.target.closest(".suggestion-field")) {
    logoLists.forEach((_node, mode) => clearLogoSuggestions(mode));
  }
});

preview.addEventListener("error", () => {
  if (badgeUrl.textContent) {
    previewStatus.textContent = "Preview failed to load. Check the current URL and query values.";
  }
});

copyButton.addEventListener("click", async () => {
  if (!badgeUrl.textContent) {
    return;
  }

  try {
    await navigator.clipboard.writeText(badgeUrl.textContent);
    copyButton.textContent = "Copied";
    window.setTimeout(() => {
      copyButton.textContent = "Copy";
    }, 1200);
  } catch (_error) {
    previewStatus.textContent = "Copy failed in this browser context.";
  }
});

setMode(state.mode);
ensureSimpleIconsLoaded();