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

export default function Item({
  slide,
  value,
  index,
}: {
  slide: number
  value: DocumentPickerResponse
  index: number
}) {
  const [paused, setPaused] = useState(false)
  const [width, setWidth] = useState(0)

  return (
    <View style={{alignItems: 'center'}}>
      <Video
        paused={slide !== index}
        style={{
          height: Dimensions.get('screen').height - 125,
          width,
          alignItems: 'center',
        }}
        source={{uri: value.uri}}
        resizeMode="contain"
        onLoad={response => {
          setWidth(response.naturalSize.width)
        }}
      />
    </View>
  )
}