import React, {useEffect, useState} from 'react';
import Video from 'react-native-video';
import {Trimmer} from 'react-native-video-processing';
import {useRef} from 'react';
import {SCREEN_WIDTH} from '../../utils';

export const TrimmerPlayer: React.FC<{
  source: string;
  videoStyles: Object;
  hideTrimmer: boolean;
  handleLoad: Function;
  onChangedEndpoints: Function;
}> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => {
  // Stores the reference to player for seeking
  const playerRef = useRef<Video>();
  // Stores where the video is playing (seekTime)
  const [seekTime, setSeekTime] = useState<number>(0);
  const [paused, setPaused] = useState<boolean>(false);
  // Stores where the tracker is
  const [trackerTime, setTrackerTime] = useState<number>(0);
  // Stores start/end of desired trimmed video
  const [end, setEnd] = useState<number>(60);
  const [start, setStart] = useState<number>(0);

  useEffect(() => {
    playerRef.current?.seek(seekTime);
  }, [seekTime]);
  useEffect(() => {
    if (!paused && (trackerTime >= end || trackerTime < start)) {
      setTrackerTime(start);
      playerRef.current?.seek(start);
    }
  }, [trackerTime]);
  useEffect(() => {
    setSeekTime(start);
    setTrackerTime(start);
  }, [start]);
  useEffect(() => {
    setSeekTime(end);
    setTrackerTime(start);
  }, [end]);
  // Callback so parent knows where the trimming endpts are
  useEffect(() => onChangedEndpoints({end, start}), [end, start]);

  return (
    <>
      <Video
        // link to descr and use of props of video player ->
        // https://github.com/react-native-video/react-native-video
        ref={(ref) => {
          playerRef.current = ref || undefined;
        }}
        source={{uri: source}}
        rate={1.0}
        volume={1.0}
        muted={false}
        paused={paused}
        resizeMode={'contain'}
        repeat={true}
        onLoad={(payload) => {
          console.log(payload, source);
          setEnd(payload.duration);
          handleLoad(payload.naturalSize);
        }}
        onProgress={(e) => {
          if (!paused) {
            setTrackerTime(e.currentTime);
          }
        }} // Callback every ~250ms with currentTime
        style={videoStyles}
        onTouchEnd={() => {
          setPaused((state) => !state);
        }}
      />
      <Trimmer
        // link to descr and use of props for trimmer ->
        // https://github.com/shahen94/react-native-video-processing
        source={source}
        height={hideTrimmer ? 0 : 75}
        width={hideTrimmer ? 0 : SCREEN_WIDTH}
        borderWidth={hideTrimmer ? 0 : 100}
        onTrackerMove={(e: {currentTime: number}) => {
          setPaused(true);
          setSeekTime(e.currentTime);
        }}
        currentTime={trackerTime}
        themeColor={'white'}
        thumbWidth={10}
        trackerColor={'white'}
        onChange={(e: {endTime: number; startTime: number}) => {
          setPaused(true);
          setEnd(e.endTime);
          setStart(e.startTime);
        }}
      />
    </>
  );
};