import React, { useEffect, useRef, memo } from 'react';
import { useSelector } from 'react-redux';
import InstructionFrame from "../../components/TemplateInstruction";
var startIn = 5;

var InstructionalVideo = function InstructionalVideo(props) {
  var videoRef = useRef();

  var _useSelector = useSelector(function (state) {
    return {
      currentExercise: state.rom.main.currentExercise,
      currentTransition: state.rom.main.currentTransition,
      paused: state.rom.main.paused
    };
  }),
      currentExercise = _useSelector.currentExercise,
      currentTransition = _useSelector.currentTransition,
      paused = _useSelector.paused;

  useEffect(function () {
    if (currentTransition === 0) {
      videoRef.current.currentTime = startIn;
      videoRef.current.load();
    }
  }, [currentTransition]);
  useEffect(function () {
    videoRef.current.onended = function () {
      if (!paused) props.onNextTransition();
    }; // var isPlaying =
    //   videoRef.current.currentTime > 0 &&
    //   !videoRef.current.paused &&
    //   !videoRef.current.ended &&
    //   videoRef.current.readyState > 0;


    if (paused) {
      videoRef.current.pause();
    } else {
      if (videoRef.current.paused && videoRef.current.readyState > 2) videoRef.current.play();
    }
  }, [paused]);
  return /*#__PURE__*/React.createElement("div", {
    className: "overlay-content"
  }, /*#__PURE__*/React.createElement(InstructionFrame, null, /*#__PURE__*/React.createElement("video", {
    id: "video",
    className: "instruction-video",
    ref: videoRef,
    autoPlay: true,
    muted: true,
    preload: "metadata",
    key: currentExercise.sample,
    src: currentExercise.sample,
    type: "video/mp4"
  })));
};

export default memo(InstructionalVideo);