import React, { useState, memo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { toggleTutorial, goToAssessment, toggleSplash, goToWeeklyAssessment } from "../../store/rom/main";
import "./style.css";
import Loading from "../../components/Loading";

var SplashPage = function SplashPage() {
  var _useSelector = useSelector(function (state) {
    return {
      loading: state.rom.main.loading
    };
  }),
      loading = _useSelector.loading;

  var _useState = useState(true),
      close = _useState[0],
      setClose = _useState[1];

  var dispatch = useDispatch();
  var onToggleSplash = useCallback(function (e) {
    dispatch(toggleSplash());
  }, [dispatch]);

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

  var onToggleTutorial = useCallback(function (e) {
    dispatch(toggleTutorial(true));
  }, [dispatch]);

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

  return /*#__PURE__*/React.createElement("div", {
    className: "splash " + (close ? 'closed' : '')
  }, loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "splash-subtitle"
  }, "What would you like to do?"), /*#__PURE__*/React.createElement("div", {
    className: "splash-actions"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn-outline",
    onClick: onToggleTutorial
  }, "TUTORIAL"), /*#__PURE__*/React.createElement("button", {
    className: "btn-outline",
    onClick: onPreAssessment
  }, "PAIN-Assessment")), /*#__PURE__*/React.createElement("button", {
    className: "btn-solid-green",
    onClick: onToggleSplash
  }, "Skip")));
};

export default memo(SplashPage);