import { useState } from 'react'
import { Pressable, ViewStyle } from 'react-native'

import { Strings } from '../i18n'
import ArrowRight from '../icons/ArrowRight'
import { ContextMenuTrigger } from '../icons/ContextMenuTrigger'
import { ContextMenuItem, ContextMenuModal } from './ContextMenuModal'
import { FeedbackModal, useFeedbackModal } from './FeedbackModal'

export const HeaderContextMenu: React.FC<{
  screenName?: string
  title?: string
  contextMenuItems?: ContextMenuItem[]
  style?: ViewStyle
}> = ({
  screenName,
  title = Strings.Shared.Actions,
  contextMenuItems = [],
  style,
}) => {
  const [contextMenuIsOpen, setContextMenuIsOpen] = useState<boolean>(false)
  const { feedbackModalOpen, setFeedbackModalOpen } = useFeedbackModal()

  const handleOnFeedbackPress = () => {
    setContextMenuIsOpen(false)
    setFeedbackModalOpen(true)
  }

  return (
    <>
      <Pressable onPress={() => setContextMenuIsOpen(true)} style={style}>
        <ContextMenuTrigger />
      </Pressable>
      <ContextMenuModal
        title={title}
        menuItems={[
          ...contextMenuItems,
          {
            id: 'feedback',
            label: Strings.Shared.SendFeedback,
            onPress: handleOnFeedbackPress,
            icon: <ArrowRight />,
          },
        ]}
        isOpen={contextMenuIsOpen}
        setIsOpen={setContextMenuIsOpen}
      />
      <FeedbackModal
        screenName={screenName}
        screenTitle={title}
        open={feedbackModalOpen}
        onClose={() => setFeedbackModalOpen(false)}
      />
    </>
  )
}