import React, { useEffect, memo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import Bottom from "../components/TemplateBottom";
import Top from "../components/TemplateTop";
import TemplateProgressBar from "../components/TemplateProgressBar";
import Main from "./Main";
import Menu from "./Menu";
import "./style.css";
import { fetchExercises, updateUser, updateAspectArea } from "../store/performance/main";
var baseHeight = 130;
var baseWidth = 231.11;

var App = function App(props) {
  var dispatch = useDispatch();

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

  var onResizeWindowByHeight = function onResizeWindowByHeight() {
    var width = 16 / 9 * (window.innerHeight - baseHeight);
    var height = window.innerHeight - baseHeight;
    dispatch(updateAspectArea({
      width: width,
      height: height
    }));
  };

  var onResizeWindowByWidth = function onResizeWindowByWidth() {
    var width = window.innerWidth - baseWidth;
    var height = 9 / 16 * (window.innerWidth - baseWidth);
    dispatch(updateAspectArea({
      width: width,
      height: height
    }));
  };

  var onResizeWindow = function onResizeWindow() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    if (width / height >= 1.77) return onResizeWindowByHeight();
    return onResizeWindowByWidth();
  };

  window.onresize = onResizeWindow;
  useEffect(function () {
    axios.defaults.baseURL = props.baseURL;
    dispatch(updateUser(props.user));
    dispatch(fetchExercises());
    onResizeWindow();
  }, [dispatch]);
  return /*#__PURE__*/React.createElement("div", {
    className: "estimator-template",
    style: {
      width: aspectArea.width + "px",
      height: aspectArea.height + "px"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "coach-container",
    style: {
      width: aspectArea.width + "px",
      height: aspectArea.height + "px"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "overlay-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "overlay-coach"
  }, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(TemplateProgressBar, {
    progress: progress
  })), /*#__PURE__*/React.createElement(Bottom, {
    title: currentExercise === null || currentExercise === void 0 ? void 0 : currentExercise.title
  }), /*#__PURE__*/React.createElement(Menu, null))), /*#__PURE__*/React.createElement(Main, null)));
};

export default memo(App);