import Feather from '@expo/vector-icons/Feather'
import { useMutation } from '@tanstack/react-query'
import { Stack, useLocalSearchParams, useRouter } from 'expo-router'
import { Pressable } from 'react-native'
import { LoadingView } from 'src/components/common/LoadingView'
import { ScreenScrollContainer } from 'src/components/layout'
import type { NewReport } from 'src/lib/api'
import { report } from 'src/lib/api'
import { ICON } from 'src/lib/icons'
import type { ReportType } from 'src/lib/reportTypes'
import { reportTypes } from 'src/lib/reportTypes'
import { emit } from 'src/lib/tapestry/emit'
import { Text, useTheme, useToastController, XStack, YStack } from 'tamagui'

type Props = {
  objectType: 'post' | 'user'
}

export function ReportScreen({ objectType }: Props) {
  const { id } = useLocalSearchParams<{ id: string }>()
  const router = useRouter()
  const theme = useTheme()
  const toast = useToastController()

  const label = objectType === 'post' ? 'post' : 'profile'
  const sentRoute = objectType === 'post' ? '/post/report/sent' : '/profile/report/sent'

  const mutation = useMutation({
    mutationFn: (newReport: NewReport) => report(newReport),
    onSuccess: () => {
      emit('x')
      router.replace(sentRoute as any)
    },
    onError: (err) => {
      toast.show('Report failed', { message: err.message, preset: 'error' })
    },
  })

  const handleAction = (type: string) => {
    mutation.mutate({
      object_id: id,
      object_type: objectType,
      report_type: type,
    })
  }

  const RenderOption = ({ title, name }: ReportType) => (
    <Pressable onPress={() => handleAction(name)}>
      <XStack
        px="$5"
        py="$3"
        bg="$background"
        borderTopWidth={1}
        borderColor="$borderColor"
        justifyContent="space-between"
        alignItems="center"
      >
        <Text fontSize="$5" color="$color">
          {title}
        </Text>
        <Feather name="chevron-right" size={ICON.md} color={theme.colorTertiary.val} />
      </XStack>
    </Pressable>
  )

  return (
    <ScreenScrollContainer variant="scroll">
      <Stack.Screen
        options={{
          title: `Report ${label.charAt(0).toUpperCase() + label.slice(1)}`,
          headerBackTitle: 'Back',
        }}
      />
      {mutation.isPending ? (
        <LoadingView />
      ) : (
        <>
          <YStack p="$5" bg="$background" gap="$3">
            <Text fontSize="$7" fontWeight="bold" color="$color">
              Why are you reporting this {label}?
            </Text>
            <Text fontSize="$5" color="$colorSecondary">
              Your report is anonymous, except if you're reporting an intellectual
              property infringement. If someone is in immediate danger, call the local
              emergency services - don't wait.
            </Text>
          </YStack>
          {reportTypes.map((r) => (
            <RenderOption key={r.name} title={r.title} name={r.name} />
          ))}
        </>
      )}
    </ScreenScrollContainer>
  )
}
