/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const { QuickSuggest } = ChromeUtils.importESModule(
  "resource:///modules/QuickSuggest.sys.mjs"
);
const { ONBOARDING_CHOICE } = QuickSuggest;

const VARIATION_MAP = {
  a: {
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-1",
      "main-title": "firefox-suggest-onboarding-main-title-1",
      "main-description": "firefox-suggest-onboarding-main-description-1",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-1",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-1",
    },
  },
  b: {
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
      "main-title": "firefox-suggest-onboarding-main-title-2",
      "main-description": "firefox-suggest-onboarding-main-description-2",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-1",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-1",
    },
  },
  c: {
    logoType: "firefox",
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-3",
      "main-title": "firefox-suggest-onboarding-main-title-3",
      "main-description": "firefox-suggest-onboarding-main-description-3",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-1",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-1",
    },
  },
  d: {
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-4",
      "main-title": "firefox-suggest-onboarding-main-title-4",
      "main-description": "firefox-suggest-onboarding-main-description-4",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-2",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-2",
    },
  },
  e: {
    logoType: "firefox",
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-5",
      "main-title": "firefox-suggest-onboarding-main-title-5",
      "main-description": "firefox-suggest-onboarding-main-description-5",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-2",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-2",
    },
  },
  f: {
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-2",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-6",
      "main-title": "firefox-suggest-onboarding-main-title-6",
      "main-description": "firefox-suggest-onboarding-main-description-6",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-2",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-2",
    },
  },
  g: {
    mainPrivacyFirst: true,
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-7",
      "main-title": "firefox-suggest-onboarding-main-title-7",
      "main-description": "firefox-suggest-onboarding-main-description-7",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-2",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-2",
    },
  },
  h: {
    logoType: "firefox",
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-1",
      "introduction-title": "firefox-suggest-onboarding-introduction-title-2",
      "main-title": "firefox-suggest-onboarding-main-title-8",
      "main-description": "firefox-suggest-onboarding-main-description-8",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-1",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-1",
    },
  },
  "100-a": {
    introductionLayout: "layout-100",
    mainPrivacyFirst: true,
    logoType: "firefox",
    l10nUpdates: {
      onboardingNext: "firefox-suggest-onboarding-introduction-next-button-3",
      "introduction-title": "firefox-suggest-onboarding-main-title-9",
      "main-title": "firefox-suggest-onboarding-main-title-9",
      "main-description": "firefox-suggest-onboarding-main-description-9",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label-2",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-3",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label-2",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-3",
    },
  },
  "100-b": {
    mainPrivacyFirst: true,
    logoType: "firefox",
    l10nUpdates: {
      "main-title": "firefox-suggest-onboarding-main-title-9",
      "main-description": "firefox-suggest-onboarding-main-description-9",
      "main-accept-option-label":
        "firefox-suggest-onboarding-main-accept-option-label-2",
      "main-accept-option-description":
        "firefox-suggest-onboarding-main-accept-option-description-3",
      "main-reject-option-label":
        "firefox-suggest-onboarding-main-reject-option-label-2",
      "main-reject-option-description":
        "firefox-suggest-onboarding-main-reject-option-description-3",
    },
    skipIntroduction: true,
  },
};

// If the window height is smaller than this value when the dialog opens, then
// the dialog will open in compact mode. The dialog will not change modes while
// it's open even if the window height changes.
const COMPACT_MODE_HEIGHT =
  650 + // section min-height (non-compact mode)
  2 * 32 + // 2 * --section-vertical-padding (non-compact mode)
  44; // approximate height of the browser window's tab bar

// Used for test only. If links or buttons may be clicked or typed Key_Enter
// while translating l10n, cannot capture the events since not register listeners
// yet. To avoid the issue, add this flag to know the listeners are ready.
let resolveOnboardingReady;
window._quicksuggestOnboardingReady = new Promise(r => {
  resolveOnboardingReady = r;
});

document.addEventListener("DOMContentLoaded", async () => {
  await document.l10n.ready;

  const variation =
    VARIATION_MAP[window.arguments[0].variationType] || VARIATION_MAP.a;

  document.l10n.pauseObserving();
  try {
    await applyVariation(variation);
  } finally {
    document.l10n.resumeObserving();
  }

  addSubmitListener(document.getElementById("onboardingClose"), () => {
    window.arguments[0].choice = ONBOARDING_CHOICE.CLOSE_1;
    window.close();
  });
  addSubmitListener(document.getElementById("onboardingNext"), () => {
    gotoMain(variation);
  });
  addSubmitListener(document.getElementById("onboardingLearnMore"), () => {
    window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2;
    window.close();
  });
  addSubmitListener(
    document.getElementById("onboardingLearnMoreOnIntroduction"),
    () => {
      window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_1;
      window.close();
    }
  );
  addSubmitListener(document.getElementById("onboardingSkipLink"), () => {
    window.arguments[0].choice = ONBOARDING_CHOICE.NOT_NOW_2;
    window.close();
  });

  const onboardingSubmit = document.getElementById("onboardingSubmit");
  const onboardingAccept = document.getElementById("onboardingAccept");
  const onboardingReject = document.getElementById("onboardingReject");
  function optionChangeListener() {
    onboardingSubmit.removeAttribute("disabled");
    onboardingAccept
      .closest(".option")
      .classList.toggle("selected", onboardingAccept.checked);
    onboardingReject
      .closest(".option")
      .classList.toggle("selected", !onboardingAccept.checked);
  }
  onboardingAccept.addEventListener("change", optionChangeListener);
  onboardingReject.addEventListener("change", optionChangeListener);

  function submitListener() {
    if (!onboardingAccept.checked && !onboardingReject.checked) {
      return;
    }

    window.arguments[0].choice = onboardingAccept.checked
      ? ONBOARDING_CHOICE.ACCEPT_2
      : ONBOARDING_CHOICE.REJECT_2;
    window.close();
  }
  addSubmitListener(onboardingSubmit, submitListener);
  onboardingAccept.addEventListener("keydown", e => {
    if (e.keyCode == e.DOM_VK_RETURN) {
      submitListener();
    }
  });
  onboardingReject.addEventListener("keydown", e => {
    if (e.keyCode == e.DOM_VK_RETURN) {
      submitListener();
    }
  });

  if (window.outerHeight < COMPACT_MODE_HEIGHT) {
    document.body.classList.add("compact");
  }

  resolveOnboardingReady();
});

function gotoMain(variation) {
  window.arguments[0].visitedMain = true;

  document.getElementById("introduction-section").classList.add("inactive");
  document.getElementById("main-section").classList.add("active");

  document.body.setAttribute("aria-labelledby", "main-title");
  let ariaDescribedBy = "main-description";
  if (variation.mainPrivacyFirst) {
    ariaDescribedBy += " main-privacy-first";
  }
  document.body.setAttribute("aria-describedby", ariaDescribedBy);
}

async function applyVariation(variation) {
  if (variation.logoType) {
    for (const logo of document.querySelectorAll(".logo")) {
      logo.classList.add(variation.logoType);
    }
  }

  if (variation.mainPrivacyFirst) {
    const label = document.querySelector("#main-section .privacy-first");
    label.classList.add("active");
  }

  if (variation.l10nUpdates) {
    const translatedElements = [];
    for (const [id, newL10N] of Object.entries(variation.l10nUpdates)) {
      const element = document.getElementById(id);
      document.l10n.setAttributes(element, newL10N);
      translatedElements.push(element);
    }
    await document.l10n.translateElements(translatedElements);
  }

  if (variation.skipIntroduction) {
    document.body.classList.add("skip-introduction");
    gotoMain(variation);
  }

  if (variation.introductionLayout) {
    document
      .getElementById("introduction-section")
      .classList.add(variation.introductionLayout);
  }
}

function addSubmitListener(element, listener) {
  if (!element) {
    console.warn("Element is null on addSubmitListener");
    return;
  }
  element.addEventListener("click", listener);
  element.addEventListener("keydown", e => {
    if (e.keyCode == e.DOM_VK_RETURN) {
      listener();
    }
  });
}
