import type { ReactNode } from 'react'
import { useLegendConfig } from '../../provider'
import { useLegendRow } from '../contexts'
import { LegendOverflowMenu } from '../legend-overflow-menu/legend-overflow-menu'

export interface LegendRowMenuProps {
  /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
  children?: ReactNode
}

/**
 * Overflow (⋮) menu for a layer row. Pins `.active` while open, busy, or the
 * inline opacity bar is open. Items self-gate when hidden.
 *
 * @experimental This API is new and may change in a future release.
 */
export function LegendRowMenu({ children }: LegendRowMenuProps) {
  const row = useLegendRow()
  const { labels } = useLegendConfig()

  return (
    <LegendOverflowMenu
      gate={Boolean(row)}
      ariaLabel={labels.layerOptions}
      active={row?.opacityOpen ?? false}
    >
      {children}
    </LegendOverflowMenu>
  )
}