import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import API from '../API';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';

const VideoPlayer = ({ videosFiles, videoId }) => {
  const gState = useSnapshot(GlobalState);
  const viewer = gState.me;
  let chosenVideo = []; 
  videosFiles.forEach((f) => {
    if (f.rendition === 'adaptive') chosenVideo.push(f);
  });
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});

  React.useEffect( async ()=>{
    setTimeout(()=>{
      if(viewer.data && viewer.data[videoId]){
        video.current.setPositionAsync(viewer.data[videoId].time*1000);
      }
    }, 5000);
  }, [])

  return (
    <Video
      ref={video}
      style={styles.video}
      source={{
        uri: chosenVideo[0].link,
      }}
      useNativeControls
      resizeMode="contain"
      isLooping
      onPlaybackStatusUpdate={status => setStatus(() => status)}
    />
  );
}

export default VideoPlayer;

const styles = StyleSheet.create({
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200,
  },
});