import { useSyncExternalStore } from 'react';
import { useAviationPlayer } from '../AviationContext';
import type { AudioRouteChangeEvent } from '../specs/types.nitro';
import type { AviationPlayer } from '../Aviation';

/**
 * React hook that surfaces the player's last audio route change — headphones
 * unplugged, Bluetooth connected, AirPlay appearing. Pairs with the
 * Diagnostics-style UI or any affordance that should react to output
 * changes ("sound switched to Living Room TV").
 *
 * Returns `undefined` until a route change occurs; re-renders only when a
 * new event arrives. `event.removedOutput.portType` is structural — never
 * branch on localized device names.
 *
 * @example
 * ```tsx
 * function RouteBanner() {
 *   const change = useAudioRoute();
 *   if (change?.removedOutput?.portType !== 'headphones') return null;
 *   return <Text>Headphones disconnected</Text>;
 * }
 * ```
 */
export function useAudioRoute(
  playerArg?: AviationPlayer
): AudioRouteChangeEvent | undefined {
  const player = useAviationPlayer(playerArg);
  return useSyncExternalStore(
    player.store.subscribeRouteChange,
    () => player.store.lastRouteChange
  );
}