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

const VideoPlayer = ({ videosFiles, videoId }) => {
  //console.log(videosFiles)
  let chosenVideo = []; //rendition
  videosFiles.forEach((f) => {
    if (f.rendition === 'adaptive') chosenVideo.push(f);
  });
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  const [Me, setMeProfile] = React.useState({});

  React.useEffect( async ()=>{
    await API.getMe().then(setMeProfile);
    setTimeout(()=>{
      if(Me.data && Me.data[videoId]){
        //video.setPositionAsync(Me.data[videoId].time*1000);
        //status.positionMillis = Me.data[videoId].time*1000;
        //setStatus({...status});
        video.current.setPositionAsync(Me.data[videoId].time*1000);
      }
      
      //status.isPlaying = true;
      
      //playAsync();
      
    }, 5000)
  }, [])

  console.log(status)

  //console.log(status)

  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,
  },
});