import {type ReactNode} from 'react'
import {type StyleProp, type ViewStyle} from 'react-native'

/**
 * The subset of SVG metadata needed by the native menu icon renderer.
 * Any icon component that carries these three properties can be passed
 * to `MenuItemIcon`. In practice this is satisfied by every icon
 * created with `createSinglePathSVG` / `createMultiPathSVG`.
 */
export type SvgIconMeta = {
  svgPaths: string[]
  svgViewBox: string
  svgStrokeWidth: number
}

/**
 * Content to show during the peek preview. Discriminated by `type`; the native
 * side dispatches on it to build the right `UIViewController`.
 *
 * `image` and `link` are implemented on iOS. `video` is the remaining
 * follow-up; leaving it in the type keeps the JS call-sites honest.
 */
export type PreviewContent =
  | {
      type: 'image'
      uri: string
      /** Thumb URL. When present, the native side paints it in as an instant
       *  placeholder (reading from the shared SDWebImage cache) while the
       *  fullsize loads — avoids the black flash on first peek. */
      thumbUri?: string
      /** Aspect ratio as width / height. */
      aspectRatio: number
    }
  | {
      type: 'video'
      uri: string
      poster?: string
      aspectRatio: number
    }
  | {
      // The peek is always a live in-app browser rendering `url`. No content is
      // sent to native beyond the `url` and browser options — the page itself
      // is what's previewed.
      type: 'link'
      url: string
      /** Controls what tapping the peek does. When true, it morphs into the
       *  live in-app browser at full-screen. When false/omitted, the peek
       *  dismisses and `onPreviewPress` fires for the host to handle the tap.
       *  Either way the peek preview shows the live page. */
      useInAppBrowser?: boolean
      /** Toolbar tint for the in-app browser. Matches expo-web-browser's
       *  `toolbarColor`. Hex string, e.g. `#ffffff`. */
      browserToolbarColor?: string
      /** Controls tint for the in-app browser. Matches expo-web-browser's
       *  `controlsColor`. Hex string, e.g. `#0085ff`. */
      browserControlsColor?: string
    }

export type MenuItemSpec = {
  id: string
  label: string
  destructive?: boolean
  disabled?: boolean
  icon?: {
    paths: string[]
    viewBox: string
    strokeWidth: number
  }
}

export type MenuItemIconSource = SvgIconMeta

export type NativeViewProps = {
  preview?: PreviewContent
  menuItems: MenuItemSpec[]
  /** Named distinctly from `borderRadius`, which RN owns as a style prop. */
  previewCornerRadius: number
  onItemPress: (e: {nativeEvent: {id: string}}) => void
  onPreviewPress: (e: {nativeEvent: {}}) => void
  style?: StyleProp<ViewStyle>
  children?: ReactNode
}