// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file anchorName.ts
 * @input HTMLElement with CSS anchor-name property
 * @output Helpers for managing comma-separated anchor-name lists
 * @position Utility; used by useLayer for multi-anchor support
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Layer/useLayer.tsx (imports from here)
 */

/**
 * CSS `anchor-name` is a comma-separated list, so multiple layers can anchor to
 * the same element (e.g. several TopNavMegaMenus anchored to one <nav>). These
 * helpers add/remove a single layer's anchor id without clobbering the others —
 * overwriting the whole property would break every sibling layer's positioning.
 */

export function readAnchorNames(el: HTMLElement): string[] {
  const value =
    (el.style as unknown as Record<string, string>).anchorName ?? '';
  return value
    .split(',')
    .map(name => name.trim())
    .filter(Boolean);
}

export function writeAnchorNames(el: HTMLElement, names: string[]): void {
  (el.style as unknown as Record<string, string>).anchorName = names.join(', ');
}

export function addAnchorName(el: HTMLElement, name: string): void {
  const names = readAnchorNames(el);
  if (!names.includes(name)) {
    names.push(name);
    writeAnchorNames(el, names);
  }
}

export function removeAnchorName(el: HTMLElement, name: string): void {
  writeAnchorNames(
    el,
    readAnchorNames(el).filter(existing => existing !== name),
  );
}