import React, { memo, useState } from 'react';
import YouTube from 'react-youtube';
import { MdClose } from 'react-icons/md';
import "./style.css";

var BetaStartScreen = function BetaStartScreen(props) {
  var _useState = useState(false),
      videoPromo = _useState[0],
      setVideoPromo = _useState[1];

  var opts = {
    width: props.aspectArea.width && props.aspectArea.width > 1280 ? 1280 : props.aspectArea.width,
    height: props.aspectArea.height && props.aspectArea.height > 720 ? 720 : props.aspectArea.height,
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1
    }
  };

  var handleVideoPromo = function handleVideoPromo() {
    setVideoPromo(true);
  };

  var onVideoFinish = function onVideoFinish() {
    setVideoPromo(false);
  };

  var onClickSnakePreview = function onClickSnakePreview() {
    props.setShowBetaScreen(false);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "beta-start-screen"
  }, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, !videoPromo && /*#__PURE__*/React.createElement("div", {
    className: "text-content"
  }, /*#__PURE__*/React.createElement("p", null, "Performance+ is in development, but you can experience a sneak preview of the future potential. Please be patient, as it\u2019s far from perfect."), /*#__PURE__*/React.createElement("p", null, "Meanwhile, view the promo video to see what Performance+ will become when it\u2019s launched in full glory.")), videoPromo && /*#__PURE__*/React.createElement("div", {
    className: "video"
  }, /*#__PURE__*/React.createElement(YouTube, {
    videoId: "b7ZKo2NnKjw",
    opts: opts,
    onEnd: onVideoFinish
  })), !videoPromo && /*#__PURE__*/React.createElement("div", {
    className: "beta-start-screen-actions"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn-outline",
    onClick: handleVideoPromo
  }, "View Promo Video"), /*#__PURE__*/React.createElement("button", {
    className: "btn-outline",
    onClick: onClickSnakePreview
  }, "Go to Sneak Preview"))), videoPromo && /*#__PURE__*/React.createElement("button", {
    className: "btn-outline btn-close",
    onClick: onVideoFinish
  }, /*#__PURE__*/React.createElement(MdClose, {
    size: "30px"
  })));
};

export default memo(BetaStartScreen);