import React, { useState, memo } from "react";
import { useDispatch } from "react-redux";
import { toggleTutorial } from "../../store/coach";
import TutorialVideo from "../TutorialVideo";
import "./Tutorial.css";

var Tutorial = function Tutorial(props) {
  var _useState = useState(true),
      close = _useState[0],
      setClose = _useState[1];

  var dispatch = useDispatch();

  var onSkipTutorial = function onSkipTutorial() {
    setClose(false);
    dispatch(toggleTutorial(false));
    localStorage.setItem("watchedTutorial", true);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "tutorial " + (close ? "closed" : "")
  }, /*#__PURE__*/React.createElement("div", {
    className: "tutorial-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tutorial-video " + (close ? "closed" : "")
  }, /*#__PURE__*/React.createElement(TutorialVideo, {
    onSkipTutorial: onSkipTutorial
  }))));
};

export default memo(Tutorial);