(function () {
  function activatePhase(flow, trigger) {
    if (!flow || !trigger) {
      return;
    }

    var targetId = trigger.getAttribute("data-phase-target");

    if (!targetId) {
      return;
    }

    var triggers = flow.querySelectorAll("[data-ethnic-phase-trigger]");
    var phases = flow.querySelectorAll("[data-ethnic-phase]");
    var panels = flow.querySelectorAll("[data-ethnic-phase-panel]");

    triggers.forEach(function (button) {
      var isActive = button === trigger;

      button.setAttribute("aria-pressed", isActive ? "true" : "false");

      var phase = button.closest("[data-ethnic-phase]");

      if (phase) {
        phase.classList.toggle("is-active", isActive);
      }
    });

    phases.forEach(function (phase) {
      if (!phase.querySelector("[data-ethnic-phase-trigger][aria-pressed=\"true\"]")) {
        phase.classList.remove("is-active");
      }
    });

    panels.forEach(function (panel) {
      var isActive = panel.id === targetId;

      panel.classList.toggle("is-active", isActive);
      panel.hidden = !isActive;
    });
  }

  function bindPhaseFlow(flow) {
    if (!flow) {
      return;
    }

    var triggers = flow.querySelectorAll("[data-ethnic-phase-trigger]");

    if (!triggers.length) {
      return;
    }

    triggers.forEach(function (trigger) {
      trigger.addEventListener("mouseenter", function () {
        activatePhase(flow, trigger);
      });

      trigger.addEventListener("focus", function () {
        activatePhase(flow, trigger);
      });

      trigger.addEventListener("click", function () {
        activatePhase(flow, trigger);
      });
    });

    activatePhase(flow, triggers[0]);
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("[data-ethnic-phase-flow]").forEach(bindPhaseFlow);
  });
})();