import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Image, Text } from '../../../components'
import { useTheme } from '../../../hooks'
import { GroupsGroupResource } from '../../../types'
import { platformFontWeightMedium } from '../../../utils'

interface RestrictedGroupRowProps {
  group: GroupsGroupResource
}

const DEFAULT_REASON = 'Chat is not enabled for this group'
const REASON_DISPLAY_TEXT: Record<string, string> = {
  leaders_only: 'Only leaders can start conversations',
  chat_disabled: DEFAULT_REASON,
}

function reasonText(reasonCode: string | null): string {
  if (!reasonCode) return DEFAULT_REASON
  return REASON_DISPLAY_TEXT[reasonCode] || DEFAULT_REASON
}

export const RestrictedGroupRow = ({ group }: RestrictedGroupRowProps) => {
  const styles = useStyles()

  return (
    <View
      style={styles.row}
      accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}
    >
      <View style={styles.innerContainer}>
        {group.headerImage?.medium && (
          <Image
            source={{ uri: group.headerImage.medium }}
            resizeMode="cover"
            style={styles.image}
            alt=""
          />
        )}
        <View style={styles.content}>
          <Text style={styles.title} numberOfLines={2}>
            {group.name}
          </Text>
          <Text variant="tertiary" numberOfLines={1}>
            {reasonText(group.canCreateConversationReasonCode)}
          </Text>
        </View>
      </View>
    </View>
  )
}

const ASPECT_RATIO = 16 / 9
const THUMBNAIL_WIDTH = 80
const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO

const useStyles = () => {
  const theme = useTheme()

  return StyleSheet.create({
    row: {
      paddingLeft: 16,
      opacity: 0.5,
    },
    innerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      paddingVertical: 16,
      paddingRight: 16,
      borderBottomWidth: 1,
      borderColor: theme.colors.fillColorNeutral050Base,
    },
    image: {
      width: THUMBNAIL_WIDTH,
      height: THUMBNAIL_HEIGHT,
      borderRadius: 4,
    },
    title: {
      fontWeight: platformFontWeightMedium,
      flexShrink: 1,
    },
    content: {
      flexShrink: 1,
      gap: 2,
    },
  })
}