import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import BottomSVG from './Bottom';
import TopSVG from './Top';
import Transitions from '../../components/Transitions';
import PreAssessment from '../../components/transitions/PreAssessment';
import WeeklyAssessment from '../../components/transitions/WeeklyAssessment';
import MainMenu from './Menu';
import ScreenGallery from '../../components/ScreenGallery/ScreenGallery';

var Overlay = function Overlay(props) {
  var _useSelector = useSelector(function (state) {
    return {
      assessment: state.coach.assessment,
      gallery: state.coach.gallery,
      weeklyAssessment: state.coach.weeklyAssessment
    };
  }),
      assessment = _useSelector.assessment,
      gallery = _useSelector.gallery,
      weeklyAssessment = _useSelector.weeklyAssessment;

  return /*#__PURE__*/React.createElement(Transitions, null, /*#__PURE__*/React.createElement("div", {
    className: "overlay-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "overlay-coach"
  }, /*#__PURE__*/React.createElement(TopSVG, null), /*#__PURE__*/React.createElement(BottomSVG, null), /*#__PURE__*/React.createElement(MainMenu, null), assessment.isOpened && /*#__PURE__*/React.createElement(PreAssessment, null), weeklyAssessment.isOpened && /*#__PURE__*/React.createElement(WeeklyAssessment, null), gallery.isOpened && /*#__PURE__*/React.createElement(ScreenGallery, null))));
};

export default memo(Overlay);