import {useState} from 'react'
import {Dimensions, Pressable, Text, View} from 'react-native'
import {DocumentPickerResponse} from 'react-native-document-picker'
import Video from 'react-native-video'

export default function Item({
  value,
  onLongPress,
}: {
  value: DocumentPickerResponse
  onLongPress: () => void
}) {
  const [paused, setPaused] = useState(false)
  const [width, setWidth] = useState(0)

  const height = Dimensions.get('screen').height

  return (
    <View style={{alignItems: 'center'}}>
      <Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
        <Video
          paused={paused}
          style={{
            height: height - height * 0.25,
            width,
            alignItems: 'center',
          }}
          source={{uri: value.uri}}
          resizeMode="contain"
          onLoad={response => {
            setWidth(response.naturalSize.width)
          }}
        />
      </Pressable>
      <Text
        style={{
          color: 'white',
        }}>
        {value.name}
      </Text>
    </View>
  )
}