import { useContext } from 'reactn'
import { Pressable, View, Image, Text } from 'react-native'
import { Video, ResizeMode } from 'expo-video'
import { Fonts, gutters, Palette } from '../styles'
import Style, { mainBorderRadius } from '../styles/Style'
import { icons } from '../assets'
import { substringTextLength } from '../helpers'
import { WebViewContext } from '../providers/WebViewProvider.js'

const thumbnailStyle = {
  width: 200,
  height: 200,
  borderRadius: mainBorderRadius / 2,
  overflow: 'hidden',
}

const RenderChatFile = ({ uri, type = 'image', name = '', containerStyle = {} }, index) => {
  const { setWebViewUrl } = useContext(WebViewContext)

  return (
    <View
      key={index}
      style={{
        ...Style.containerRow,
        ...containerStyle,
      }}
    >
      {type === 'IMAGE' ? (
        <Pressable>
          <Image
            alt={name}
            source={{
              uri,
            }}
            style={thumbnailStyle}
          />
        </Pressable>
      ) : type === 'FILE' ? (
        <Pressable
          onPress={() => {
            setWebViewUrl(uri)
          }}
          style={{
            ...Style.containerRow,
            ...Style.containerCenter,
            backgroundColor: Palette.transparentPrimary,
            padding: gutters / 2,
            borderRadius: mainBorderRadius / 2,
          }}
        >
          <Image
            resizeMode="contain"
            source={icons.attachment}
            style={{
              ...Style.iconSmall,
              marginRight: 5,
            }}
          />
          <Text
            style={Fonts({
              type: 'default',
              style: {
                color: Palette.white,
                textDecorationLine: 'underline',
              },
            })}
          >
            {substringTextLength({ text: name, maxLength: 40 })}
          </Text>
        </Pressable>
      ) : type === 'VIDEO' ? (
        <Video
          style={{ ...thumbnailStyle }}
          source={{
            uri,
          }}
          //   posterSource={{
          //     uri: thumbnailURI,
          //   }}
          //   usePoster={thumbnailURI ? true : false}
          useNativeControls
          resizeMode={ResizeMode.CONTAIN}
          isLooping
          // onPlaybackStatusUpdate={status => setStatus(() => status)}
        />
      ) : null}
    </View>
  )
}

export default RenderChatFile