import {useSafeArea} from '../../hooks/util/useSafeArea'

type Edge = 'top' | 'right' | 'bottom' | 'left'

export interface SafeAreaDocProps {
  /** Which edges to apply safe area insets to. Defaults to all edges. */
  edges?: Edge[]
  /** Whether to apply insets as padding or margin. Defaults to 'padding'. */
  mode?: 'padding' | 'margin'
  /** Additional CSS classes */
  className?: string
  /** Additional inline styles */
  style?: React.CSSProperties
  /** Content to render inside the safe area */
  children?: React.ReactNode
}

const ALL_EDGES: Edge[] = ['top', 'right', 'bottom', 'left']

const CSS_VAR_MAP: {[key in Edge]: string} = {
  top: 'var(--safe-area-inset-top, 0px)',
  right: 'var(--safe-area-inset-right, 0px)',
  bottom: 'var(--safe-area-inset-bottom, 0px)',
  left: 'var(--safe-area-inset-left, 0px)',
}

const STYLE_KEY_MAP: {[key in 'padding' | 'margin']: {[edge in Edge]: string}} =
  {
    padding: {
      top: 'paddingTop',
      right: 'paddingRight',
      bottom: 'paddingBottom',
      left: 'paddingLeft',
    },
    margin: {
      top: 'marginTop',
      right: 'marginRight',
      bottom: 'marginBottom',
      left: 'marginLeft',
    },
  }

/**
 * A container that applies safe area insets as padding or margin.
 *
 * Ensures content isn't hidden behind system UI (home indicator,
 * navigation bar, etc).
 *
 * Uses CSS custom properties (`--safe-area-inset-*`) injected by the
 * Shop app, which work reliably on both iOS and Android.
 *
 * Only applies inline padding/margin for edges where the safe area
 * inset is non-zero, so your Tailwind classes and styles are preserved
 * on edges that don't need safe area handling.
 *
 * @example
 * ```tsx
 * <SafeArea edges={['bottom']}>
 *   <footer>Sticky footer content</footer>
 * </SafeArea>
 * ```
 *
 * @example
 * ```tsx
 * <SafeArea className="pt-12 px-4">
 *   <div>Custom top/side padding, safe area bottom</div>
 * </SafeArea>
 * ```
 */
export function SafeArea({
  edges = ALL_EDGES,
  mode = 'padding',
  className,
  style: styleProp,
  children,
}: SafeAreaDocProps) {
  const style: React.CSSProperties = {...styleProp}
  const keys = STYLE_KEY_MAP[mode]
  const insets = useSafeArea()

  for (const edge of edges) {
    if (insets?.[edge] > 0) {
      ;(style as any)[keys[edge]] = CSS_VAR_MAP[edge]
    }
  }

  return (
    <div className={className} style={style}>
      {children}
    </div>
  )
}