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, postId, profileId, poster, videoUrl, videoStyle }) => {
  const gState = useSnapshot(GlobalState);
  const viewer = gState.me;
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  const [chosenVideo, setChosenVideo] = React.useState([]);
  

  React.useEffect(()=>{
    let chosenVideo = []; 
    if(videosFiles)
    videosFiles.forEach((f) => {
      if (f.rendition === 'adaptive') chosenVideo.push(f);
    });
    if(videoUrl) chosenVideo.push({link: videoUrl});
    console.log(chosenVideo);
    setChosenVideo(chosenVideo);
  }, [videoUrl, postId]);

  const onLoad = async ()=>{
    if(!viewer.data[postId]) return 0;
    console.log(postId + " loaded")
    await video.current.setPositionAsync(viewer.data[postId].time*1000);
    //video.current.isPlaying = true;
    //video.current.presentFullscreenPlayer();
  };

  //console.log("status", status)
  if(postId && status.isPlaying){
    const ts = new Date();
    const newData = {
      watched: status.didJustFinish,
      time: Math.round(status.positionMillis/1000),
      ts: ts.getTime(),
      duration: Math.round(status.durationMillis/1000),
      postId: postId,
      profileId: profileId,
    };
    console.log(postId, newData);
    API.setDataValue(postId, newData);
  }
  
  return (
    <Video
      ref={video}
      style={{
        ...styles.video,
        ...videoStyle
      }}
      source={{
        uri: chosenVideo.length ? chosenVideo[chosenVideo.length-1].link : '',
      }}
      useNativeControls={true}
      shouldPlay={true}
      resizeMode="contain"
      onPlaybackStatusUpdate={status => setStatus(() => status)}
      onLoad={onLoad}
    />
  );
}

export default VideoPlayer;

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