import React, { useEffect, useRef, memo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import InstructionFrame from "../../components/TemplateInstruction";
import { invertVideo } from "../../store/performance/main";
import "./style.css";

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

  var _useSelector = useSelector(function (state) {
    return state.performance.main;
  }),
      currentExercise = _useSelector.currentExercise,
      isInvertVideo = _useSelector.isInvertVideo;

  var dispatch = useDispatch();
  useEffect(function () {
    videoRef.current.load();
  }, [currentExercise]);

  var toogleInvertVideo = function toogleInvertVideo() {
    dispatch(invertVideo());
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "overlay-content"
  }, /*#__PURE__*/React.createElement(InstructionFrame, {
    currentExercise: currentExercise,
    toogleInvertVideo: toogleInvertVideo
  }, /*#__PURE__*/React.createElement("video", {
    id: "video",
    audio: "true",
    className: isInvertVideo ? 'instruction-video inverted' : 'instruction-video',
    ref: videoRef,
    autoPlay: true,
    loop: true,
    muted: true,
    preload: "metadata",
    key: currentExercise === null || currentExercise === void 0 ? void 0 : currentExercise.videoUrl,
    src: currentExercise === null || currentExercise === void 0 ? void 0 : currentExercise.videoUrl,
    type: "video/mp4"
  })));
};

export default memo(InstructionalVideo);