opportunities-extension/src/features/preferences/view.js

function createPreferencesView({
  DEFAULT_OPPTY_PRODUCTS_CACHE_HOURS,
  MODAL_ID,
  OPPORTUNITY_TYPE_OPTIONS,
  OPPORTUNITY_TYPE_PREFERENCES_STORAGE_KEY,
  OPPTY_PRODUCTS_CACHE_OPTIONS,
  PERIOD_OPTIONS,
  PREFERENCES_MODAL_ID,
  createCloseIcon,
  getSavedOpportunityTypeValues,
  getSavedOpptyProductsCacheHours,
  preferencesState,
  requestOpportunitiesForPeriod,
  environment
}) {
  const { document } = environment;
  const getLocalStorage = () => environment.localStorage;
  function openPreferencesModal() {
    const overlay = document.getElementById(MODAL_ID);

    if (!overlay) {
      return;
    }

    const existingModal = document.getElementById(PREFERENCES_MODAL_ID);

    if (existingModal) {
      const savedValues = new Set(getSavedOpportunityTypeValues());
      existingModal.querySelectorAll("input[name='opportunityTypeView']").forEach((checkbox) => {
        checkbox.checked = savedValues.has(checkbox.value);
      });
      const cacheSelect = existingModal.querySelector("select[name='opptyProductsCacheHours']");

      if (cacheSelect) {
        cacheSelect.value = String(getSavedOpptyProductsCacheHours());
      }

      existingModal.hidden = false;
      existingModal.querySelector("input")?.focus();
      return;
    }

    const preferencesModal = document.createElement("section");
    preferencesModal.id = PREFERENCES_MODAL_ID;
    preferencesModal.className = "opportunities-extension-preferences-modal";
    preferencesModal.setAttribute("role", "dialog");
    preferencesModal.setAttribute("aria-modal", "true");
    preferencesModal.setAttribute("aria-labelledby", "opportunities-extension-preferences-title");

    const dialog = document.createElement("div");
    dialog.className = "opportunities-extension-preferences-dialog";

    const header = document.createElement("header");
    header.className = "opportunities-extension-preferences-header";

    const title = document.createElement("h2");
    title.id = "opportunities-extension-preferences-title";
    title.textContent = "Preferences";

    const closeButton = document.createElement("button");
    closeButton.type = "button";
    closeButton.className = "opportunities-extension-icon-button";
    closeButton.setAttribute("aria-label", "Fechar preferências");
    closeButton.title = "Close";
    closeButton.append(createCloseIcon());
    closeButton.addEventListener("click", closePreferencesModal);
    header.append(title, closeButton);

    const content = document.createElement("div");
    content.className = "opportunities-extension-preferences-content";

    const fieldset = document.createElement("fieldset");
    fieldset.className = "opportunities-extension-preferences-fieldset";

    const legend = document.createElement("legend");
    legend.textContent = "Opportunity Type View";
    fieldset.append(legend);

    const selectedValues = new Set(getSavedOpportunityTypeValues());
    const options = document.createElement("div");
    options.className = "opportunities-extension-preferences-options";

    OPPORTUNITY_TYPE_OPTIONS.forEach((option) => {
      const label = document.createElement("label");
      label.className = "opportunities-extension-preferences-option";

      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.name = "opportunityTypeView";
      checkbox.value = option.value;
      checkbox.checked = selectedValues.has(option.value);

      const text = document.createElement("span");
      text.textContent = option.label;
      label.append(checkbox, text);
      options.append(label);
    });

    fieldset.append(options);

    const cacheField = document.createElement("label");
    cacheField.className = "opportunities-extension-preferences-cache-field";

    const cacheLabel = document.createElement("span");
    cacheLabel.textContent = "Product cache duration";

    const cacheSelect = document.createElement("select");
    cacheSelect.name = "opptyProductsCacheHours";
    cacheSelect.setAttribute("aria-label", "Product cache duration");
    OPPTY_PRODUCTS_CACHE_OPTIONS.forEach((option) => {
      const optionElement = document.createElement("option");
      optionElement.value = String(option.value);
      optionElement.textContent = option.label;
      optionElement.selected = option.value === getSavedOpptyProductsCacheHours();
      cacheSelect.append(optionElement);
    });
    cacheField.append(cacheLabel, cacheSelect);
    content.append(fieldset, cacheField);

    const footer = document.createElement("footer");
    footer.className = "opportunities-extension-preferences-footer";

    const saveButton = document.createElement("button");
    saveButton.type = "button";
    saveButton.className = "opportunities-extension-button opportunities-extension-button-primary";
    saveButton.textContent = "Save";
    saveButton.addEventListener("click", () => {
      const selectedValues = Array.from(preferencesModal.querySelectorAll("input[name='opportunityTypeView']:checked"), (checkbox) => checkbox.value);
      const selectedCacheHours = Number(preferencesModal.querySelector("select[name='opptyProductsCacheHours']")?.value);
      preferencesState.selectedOpportunityTypeValues = new Set(selectedValues);
      preferencesState.opptyProductsCacheHours = OPPTY_PRODUCTS_CACHE_OPTIONS.some((option) => option.value === selectedCacheHours)
        ? selectedCacheHours
        : DEFAULT_OPPTY_PRODUCTS_CACHE_HOURS;

      try {
        getLocalStorage().setItem(OPPORTUNITY_TYPE_PREFERENCES_STORAGE_KEY, JSON.stringify({
          opportunityTypeValues: selectedValues,
          opptyProductsCacheHours: preferencesState.opptyProductsCacheHours
        }));
      } catch (error) {
        // Continue with the saved selection for the active modal when storage is unavailable.
      }

      closePreferencesModal();
      const periodSelect = overlay.querySelector("select[name='opportunityPeriod']");
      requestOpportunitiesForPeriod(periodSelect?.value || PERIOD_OPTIONS[0]);
    });

    footer.append(saveButton);
    dialog.append(header, content, footer);
    preferencesModal.append(dialog);
    overlay.append(preferencesModal);
    preferencesModal.querySelector("input")?.focus();
  }

  function closePreferencesModal() {
    const preferencesModal = document.getElementById(PREFERENCES_MODAL_ID);

    if (preferencesModal) {
      preferencesModal.hidden = true;
    }
  }

  return { openPreferencesModal, closePreferencesModal };
}