import React, { memo, useCallback } from 'react';
import { MdOutlinePlayCircle, MdMenu, MdOutlinePhotoLibrary, MdOutlineQuiz } from 'react-icons/md';
import { useSelector, useDispatch } from 'react-redux';
import { goToExercise, goToGallery, goToAssessment, goToWeeklyAssessment, toggleTutorial, toggleMenu } from "../../store/rom/main";

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

  var _useSelector = useSelector(function (state) {
    return {
      menu: state.rom.main.menu,
      exercises: state.rom.main.exercises,
      resultsExercises: state.rom.main.resultsExercises
    };
  }),
      exercises = _useSelector.exercises,
      menu = _useSelector.menu,
      resultsExercises = _useSelector.resultsExercises;

  var showSidebar = function showSidebar() {
    dispatch(toggleMenu());
  };

  var onToggleTutorial = useCallback(function (e) {
    showSidebar(false);
    dispatch(toggleTutorial(true));
  }, [dispatch, showSidebar]);
  var onClickMenu = useCallback(function (e, exercise) {
    e.stopPropagation();
    showSidebar();
    dispatch(goToExercise(exercise));
  });
  var onToggleGalley = useCallback(function (e, exercise) {
    e.stopPropagation();
    showSidebar();
    dispatch(goToGallery({
      isOpened: true,
      exercise: exercise
    }));
  });

  var onPreAssessment = function onPreAssessment() {
    showSidebar();
    dispatch(goToAssessment());
  };

  var onWeeklyAssessment = function onWeeklyAssessment() {
    showSidebar();
    dispatch(goToWeeklyAssessment());
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
    className: "btn-icon btn-menu",
    onClick: showSidebar
  }, /*#__PURE__*/React.createElement(MdMenu, {
    className: "md-icon",
    color: "#FFF",
    size: "26px"
  })), /*#__PURE__*/React.createElement("div", {
    className: menu.isOpened ? 'overlay-menu active' : 'overlay-menu',
    onClick: showSidebar
  }), /*#__PURE__*/React.createElement("div", {
    className: menu.isOpened ? 'main-menu active' : 'main-menu'
  }, /*#__PURE__*/React.createElement("ul", {
    className: "exercise-list"
  }, /*#__PURE__*/React.createElement("li", {
    className: "primary-links",
    onClick: onToggleTutorial
  }, /*#__PURE__*/React.createElement(MdOutlinePlayCircle, {
    className: "md-icon",
    size: "24px"
  }), "Tutorial"), /*#__PURE__*/React.createElement("li", {
    className: "primary-links",
    onClick: onPreAssessment
  }, /*#__PURE__*/React.createElement(MdOutlineQuiz, {
    className: "md-icon",
    size: "24px"
  }), "PAIN-ASSESSMENT"), /*#__PURE__*/React.createElement("li", {
    className: "primary-links",
    onClick: onWeeklyAssessment
  }, /*#__PURE__*/React.createElement(MdOutlineQuiz, {
    className: "md-icon",
    size: "24px"
  }), "WEEKLY ASSESSMENT"), /*#__PURE__*/React.createElement("li", {
    className: "menu-subtitle"
  }, "EXERCISES"), exercises.length > 0 && exercises.map(function (exercise, index) {
    var _exercise$label, _resultsExercises$fin;

    return /*#__PURE__*/React.createElement("li", {
      onClick: function onClick(e) {
        return onClickMenu(e, exercise);
      },
      key: "rom-menu-" + index,
      className: resultsExercises.find(function (exer) {
        return exer._id === exercise._id;
      }) ? 'done' : ''
    }, exercise === null || exercise === void 0 ? void 0 : (_exercise$label = exercise.label) === null || _exercise$label === void 0 ? void 0 : _exercise$label.toUpperCase(), /*#__PURE__*/React.createElement("div", {
      className: "actions-menu"
    }, /*#__PURE__*/React.createElement(MdOutlinePhotoLibrary, {
      onClick: function onClick(e) {
        return onToggleGalley(e, exercise);
      },
      className: "compare-icon md-icon",
      size: "24px"
    }), (_resultsExercises$fin = resultsExercises.find(function (exer) {
      return exer._id === exercise._id;
    })) === null || _resultsExercises$fin === void 0 ? void 0 : _resultsExercises$fin.result));
  }))));
};

export default memo(Menu);