import { memo } from 'react'
import { Platform } from 'react-native'
import ImageComponent from 'src/components/ImageComponent'
import { Text, TextArea, useTheme, View, XStack, YStack } from 'tamagui'

type Props = {
  item: any
  onChange: (id: string, text: string) => void
}

export const EditMediaAltCard = memo(function EditMediaAltCard({
  item,
  onChange,
}: Props) {
  const theme = useTheme()
  return (
    <XStack m="$3" gap="$3">
      {item.type === 'image' ? (
        <ImageComponent
          placeholder={{ blurhash: item?.blurhash || '' }}
          source={{ uri: item.url }}
          style={{ width: 100, height: 160, borderRadius: 5 }}
          contentFit={'cover'}
        />
      ) : (
        <View w={100} h={160} bg="$gray8" />
      )}
      <YStack flexGrow={1} width="70%" gap="$2">
        <Text fontSize="$3" allowFontScaling={false} color={theme.color.val}>
          Media Alt Text
        </Text>

        <TextArea
          size="$4"
          fontSize={Platform.OS === 'ios' ? '$7' : '$5'}
          borderWidth={1}
          borderColor={theme.borderColor.val}
          color={theme.color.val}
          flexGrow={1}
          defaultValue={item.description}
          onChangeText={(text) => onChange(item.id, text)}
          maxLength={1000}
          backgroundColor={theme.backgroundTertiary.val}
          numberOfLines={4}
          rows={4}
          multiline={true}
          textAlignVertical="top"
          placeholder="Add descriptive alt text to describe your media here..."
          placeholderTextColor="$colorTertiary"
        />

        <XStack justifyContent="flex-end" alignItems="center">
          <Text color={theme.colorTertiary.val}>
            {item?.description ? item?.description?.length : '0'}/1000
          </Text>
        </XStack>
      </YStack>
    </XStack>
  )
})
