import { Text, useTheme, View } from 'tamagui'

type Severance = {
  type?: string
  target_name?: string
  followers_count?: number
  following_count?: number
}

type ModerationWarning = {
  action?: string
  text?: string
}

const severanceLabel = (type?: string): string => {
  switch (type) {
    case 'domain_block':
      return 'Your server blocked a domain'
    case 'user_domain_block':
      return 'You blocked a domain'
    case 'account_suspension':
      return 'An account was suspended'
    default:
      return 'Relationships were severed'
  }
}

export function SeveredRelationshipsPanel({ event }: { event?: Severance }) {
  const theme = useTheme()
  if (!event) return null
  return (
    <View
      mt="$2"
      px="$3"
      py="$2"
      borderWidth={1}
      borderColor={theme.borderColor.val}
      borderRadius="$3"
      borderCurve="continuous"
      bg={theme.backgroundTertiary.val}
    >
      <Text fontSize="$2" fontWeight="bold" color={theme.color.val}>
        {severanceLabel(event.type)}
      </Text>
      {event.target_name ? (
        <Text fontSize="$2" color={theme.colorSecondary.val}>
          {event.target_name}
        </Text>
      ) : null}
      {typeof event.followers_count === 'number' ||
      typeof event.following_count === 'number' ? (
        <Text fontSize="$2" color={theme.colorTertiary.val}>
          {event.followers_count ?? 0} followers · {event.following_count ?? 0} following
          affected
        </Text>
      ) : null}
    </View>
  )
}

export function ModerationWarningPanel({ warning }: { warning?: ModerationWarning }) {
  const theme = useTheme()
  if (!warning) return null
  const action = warning.action ? String(warning.action).replace(/_/g, ' ') : 'warning'
  return (
    <View
      mt="$2"
      px="$3"
      py="$2"
      borderWidth={1}
      borderColor={theme.borderColor.val}
      borderRadius="$3"
      borderCurve="continuous"
      bg={theme.backgroundTertiary.val}
    >
      <Text fontSize="$2" fontWeight="bold" color={theme.color.val}>
        Action: {action}
      </Text>
      {warning.text ? (
        <Text mt="$1" fontSize="$2" color={theme.colorSecondary.val}>
          {warning.text}
        </Text>
      ) : null}
    </View>
  )
}
