type VisibilityEntry = Pick<
  IntersectionObserverEntry,
  "intersectionRatio" | "isIntersecting" | "target"
>;

export type SettingsSectionVisibilityScope = {
  readonly path: string;
};

export type SettingsSectionVisibilityState = {
  readonly scope: SettingsSectionVisibilityScope;
  readonly targetIds: ReadonlySet<string>;
};

const EMPTY_VISIBLE_SETTINGS_SECTION_IDS: ReadonlySet<string> = new Set();

export function getVisibleSettingsSectionIds({
  activePath,
  scope,
  visibility,
}: {
  readonly activePath: string | undefined;
  readonly scope: SettingsSectionVisibilityScope | null;
  readonly visibility: SettingsSectionVisibilityState | null;
}): ReadonlySet<string> {
  if (!scope || activePath !== scope.path || visibility?.scope !== scope) {
    return EMPTY_VISIBLE_SETTINGS_SECTION_IDS;
  }
  return visibility.targetIds;
}

type ElementObserver = {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
};

type MutationSubscription = {
  disconnect(): void;
};

export type SettingsSectionVisibilityEnvironment = {
  findRoot(container: Element): Element | null;
  findTarget(root: Element, targetId: string): Element | null;
  createIntersectionObserver(
    onEntries: (entries: ReadonlyArray<VisibilityEntry>) => void,
    root: Element,
  ): ElementObserver;
  createMutationObserver(onMutation: () => void, container: Element): MutationSubscription;
};

function createBrowserEnvironment(): SettingsSectionVisibilityEnvironment {
  return {
    findRoot(container) {
      return container.querySelector("[data-settings-page-scroll]");
    },
    findTarget(root, targetId) {
      const target = root.ownerDocument.getElementById(targetId);
      return target && root.contains(target) ? target : null;
    },
    createIntersectionObserver(onEntries, scrollRoot) {
      const observer = new IntersectionObserver(onEntries, {
        root: scrollRoot,
        threshold: 0,
      });
      return observer;
    },
    createMutationObserver(onMutation, container) {
      const observer = new MutationObserver(onMutation);
      observer.observe(container, { childList: true, subtree: true });
      return observer;
    },
  };
}

export function observeSettingsSectionVisibility({
  container,
  targetIds,
  onChange,
  environment = createBrowserEnvironment(),
}: {
  readonly container: Element;
  readonly targetIds: ReadonlyArray<string>;
  readonly onChange: (visibleTargetIds: ReadonlyArray<string>) => void;
  readonly environment?: SettingsSectionVisibilityEnvironment;
}): () => void {
  const orderedTargetIds = [...new Set(targetIds)];
  const targetsById = new Map<string, Element>();
  const targetIdsByElement = new Map<Element, string>();
  const visibleTargetIds = new Set<string>();
  let lastEmission: string | null = null;
  let stopped = false;
  let root: Element | null = null;
  let intersectionObserver: ElementObserver | null = null;
  let observerGeneration = 0;

  const emit = () => {
    const visibleInOrder = orderedTargetIds.filter((targetId) => visibleTargetIds.has(targetId));
    const emissionKey = visibleInOrder.join("\0");
    if (emissionKey === lastEmission) return;
    lastEmission = emissionKey;
    onChange(visibleInOrder);
  };

  const handleEntries = (entries: ReadonlyArray<VisibilityEntry>, generation: number) => {
    if (stopped || generation !== observerGeneration) return;
    let changed = false;
    for (const entry of entries) {
      const targetId = targetIdsByElement.get(entry.target);
      if (!targetId || targetsById.get(targetId) !== entry.target) continue;
      const visible = entry.isIntersecting && entry.intersectionRatio > 0;
      if (visible === visibleTargetIds.has(targetId)) continue;
      changed = true;
      if (visible) {
        visibleTargetIds.add(targetId);
      } else {
        visibleTargetIds.delete(targetId);
      }
    }
    if (changed) emit();
  };

  const syncTargets = () => {
    if (stopped) return;
    let changed = false;
    const nextRoot = environment.findRoot(container);

    if (nextRoot !== root) {
      observerGeneration += 1;
      intersectionObserver?.disconnect();
      intersectionObserver = null;
      root = nextRoot;
      targetsById.clear();
      targetIdsByElement.clear();
      changed = visibleTargetIds.size > 0;
      visibleTargetIds.clear();

      if (root) {
        const generation = observerGeneration;
        intersectionObserver = environment.createIntersectionObserver(
          (entries) => handleEntries(entries, generation),
          root,
        );
      }
    }

    if (!root || !intersectionObserver) {
      if (changed) emit();
      return;
    }

    for (const targetId of orderedTargetIds) {
      const previousTarget = targetsById.get(targetId) ?? null;
      const nextTarget = environment.findTarget(root, targetId);
      if (previousTarget === nextTarget) continue;

      if (previousTarget) {
        intersectionObserver.unobserve(previousTarget);
        targetsById.delete(targetId);
        targetIdsByElement.delete(previousTarget);
        changed = visibleTargetIds.delete(targetId) || changed;
      }
      if (nextTarget) {
        targetsById.set(targetId, nextTarget);
        targetIdsByElement.set(nextTarget, targetId);
        intersectionObserver.observe(nextTarget);
      }
    }

    if (changed) emit();
  };

  const mutationObserver = environment.createMutationObserver(syncTargets, container);
  syncTargets();
  emit();

  return () => {
    stopped = true;
    observerGeneration += 1;
    intersectionObserver?.disconnect();
    mutationObserver.disconnect();
    targetsById.clear();
    targetIdsByElement.clear();
    visibleTargetIds.clear();
  };
}