import {View} from 'react-native'
import {type ChatBskyConvoDefs} from '@atproto/api'
import {Trans} from '@lingui/react/macro'

import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useSession} from '#/state/session'
import {atoms as a, tokens} from '#/alf'
import {parseConvoView} from '#/components/dms/util'
import {KnownFollowers} from '#/components/KnownFollowers'
import {Text} from '#/components/Typography'
import {ChatListItem, ChatListItemPortal} from './ChatListItem'
import {AcceptChatButton, DeleteChatButton, RejectMenu} from './RequestButtons'

export function IncomingRequestListItem({
  convo: convoView,
}: {
  convo: ChatBskyConvoDefs.ConvoView
}) {
  const {currentAccount} = useSession()
  const moderationOpts = useModerationOpts()

  const convo = parseConvoView(convoView, currentAccount?.did)

  if (!convo || !moderationOpts) {
    return null
  }

  const isDeletedAccount =
    !convo.primaryMember || convo.primaryMember.handle === 'missing.invalid'

  const canAcceptRequest =
    convo.kind === 'direct' || convo.details.lockStatus === 'unlocked'

  return (
    <View style={[a.relative, a.flex_1]}>
      <ChatListItem convo={convo.view} showMenu={false}>
        {convo.kind === 'direct' && convo.primaryMember && (
          <View style={[a.pt_xs, a.pb_2xs]}>
            <KnownFollowers
              profile={convo.primaryMember}
              moderationOpts={moderationOpts}
              minimal
              showIfEmpty
            />
          </View>
        )}
        {/* spacer, since you can't nest pressables */}
        <View style={[a.py_lg, a.w_full, {opacity: 0}]} aria-hidden>
          {/* Placeholder text so that it responds to the font height */}
          <Text style={[a.text_xs, a.leading_tight, a.font_semi_bold]}>
            <Trans comment="Accept a chat request">Accept Request</Trans>
          </Text>
        </View>
        {/* then, this gets absolutely positioned on top of the spacer */}
        <ChatListItemPortal.Portal>
          <View
            style={[
              a.absolute,
              a.pr_md,
              a.w_full,
              a.flex_row,
              a.align_center,
              a.gap_sm,
              {
                bottom: tokens.space.md,
                paddingLeft: tokens.space.lg + 52 + tokens.space.md,
              },
            ]}>
            {convo.primaryMember && !isDeletedAccount ? (
              <>
                {canAcceptRequest ? (
                  <AcceptChatButton convo={convo.view} currentScreen="list" />
                ) : null}
                <RejectMenu
                  convo={convo}
                  profile={convo.primaryMember}
                  showDeleteConvo
                  currentScreen="list"
                />
              </>
            ) : (
              <>
                <DeleteChatButton convo={convo.view} currentScreen="list" />
                <View style={a.flex_1} />
              </>
            )}
          </View>
        </ChatListItemPortal.Portal>
      </ChatListItem>
    </View>
  )
}
