import React, { useEffect } from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'

// =================================
// ====== Types ====================
// =================================

// Mirrors the props shared by `@expo/ui/community/menu` and
// `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.

export type MenuActionState = 'on' | 'off'

export interface MenuActionAttributes {
  destructive?: boolean
  disabled?: boolean
  hidden?: boolean
}

export interface MenuAction {
  id?: string
  title: string
  state?: MenuActionState
  attributes?: MenuActionAttributes
  subactions?: MenuAction[]
  displayInline?: boolean
}

export interface MenuActionEvent {
  nativeEvent: { event: string }
}

export interface MenuViewProps {
  actions: MenuAction[]
  onPressAction?: (event: MenuActionEvent) => void
  onOpenMenu?: () => void
  onCloseMenu?: () => void
  shouldOpenOnLongPress?: boolean
  title?: string
  style?: StyleProp<ViewStyle>
  testID?: string
  children?: React.ReactNode
}

export type MenuView = React.ComponentType<MenuViewProps>

// =================================
// ====== Adapter ==================
// =================================

function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
  useEffect(() => {
    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')
  }, [])

  return (
    <View style={style} testID={testID}>
      {children}
    </View>
  )
}

export class MenuAdapter {
  View: MenuView
  isConfigured: boolean

  constructor(methods?: { View: MenuView }) {
    this.View = methods?.View ?? UnconfiguredMenuView
    this.isConfigured = !!methods?.View
  }
}