import {Stack} from 'expo-router'
import {type SFSymbol} from 'expo-symbols'

import {IS_LIQUID_GLASS} from '@/env'
import {tokens} from '@/sprinkles'

// a Stack.Toolbar button that surfaces an unread count. `icon` is the base SF
// Symbol name (e.g. `bell`); its filled variant is always shown. ios 26 adds a
// native UIBarButtonItem.Badge count pill; older versions fall back to the
// `.badge.fill` glyph (a dot, no count).
//
// returns the button element directly rather than a component — Stack.Toolbar
// reads its children by element type, so the button cannot be wrapped
export function toolbarBadgeButton({
  accessibilityLabel,
  icon,
  count,
  onPress,
}: {
  accessibilityLabel: string
  icon: SFSymbol
  count: number
  onPress: () => void
}) {
  const active = count > 0
  return (
    <Stack.Toolbar.Button
      accessibilityLabel={accessibilityLabel}
      icon={
        !IS_LIQUID_GLASS && active
          ? (`${icon}.badge.fill` as SFSymbol)
          : (`${icon}.fill` as SFSymbol)
      }
      onPress={onPress}
    >
      {IS_LIQUID_GLASS && active && (
        // native default is labelFontSize (17pt); shrink to a count badge
        <Stack.Toolbar.Badge style={{fontSize: tokens.fontSize.xs}}>
          {String(count)}
        </Stack.Toolbar.Badge>
      )}
    </Stack.Toolbar.Button>
  )
}
