function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useEffect, useRef, memo, useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { PoseEstimationController } from '../controller';
import Loading from './Loading';
import { exerciseValue, toggleLoading } from '../store/coach'; // TODO: REVISAR NOVAMENTE

var DisplayerComponent = function DisplayerComponent(props) {
  var canvasRef = useRef(null);
  var videoRef = useRef(null);
  var dispatch = useDispatch();

  var _useSelector = useSelector(function (state) {
    return {
      currentExercise: state.coach.currentExercise,
      loading: state.coach.loading
    };
  }),
      currentExercise = _useSelector.currentExercise,
      loading = _useSelector.loading;

  var onInitHandler = function onInitHandler() {// setShowLoading(false);
  };

  var onLoading = function onLoading() {
    dispatch(toggleLoading(false));
  };

  var onExerciseValue = function onExerciseValue(value) {
    dispatch(exerciseValue(value));
  };

  useEffect(function () {
    var propsmerged = _extends({}, props, {
      currentExercise: currentExercise,
      onExerciseValue: onExerciseValue,
      onLoading: onLoading
    });

    var poseEstimator = new PoseEstimationController(canvasRef.current, videoRef.current, onInitHandler, propsmerged);
    poseEstimator.onInit();
    poseEstimator.holistic.updateProps(propsmerged);
  }, [currentExercise]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, null), /*#__PURE__*/React.createElement("video", {
    id: "videoNoShow",
    style: {
      display: 'none'
    },
    playsInline: true,
    ref: videoRef
  }), /*#__PURE__*/React.createElement("canvas", {
    id: "canvas",
    ref: canvasRef,
    width: "1280px",
    height: "720px"
  }));
};

export default memo(DisplayerComponent);