"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = TutorialTile;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _components = require("../../../components");

var _tutorials = require("../Modal/proptypes/tutorials");

// 3rd-party libs
// Components
// Internals
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "TutorialTile": "_2Ta6t-TutorialTile",
  "TutorialTile-Body": "_22xxr-TutorialTile-Body",
  "TutorialTile-Body-Avatar": "_1EKmr-TutorialTile-Body-Avatar",
  "TutorialTile-Body-Text": "_1ffa3-TutorialTile-Body-Text",
  "TutorialTile-Body-Text-Title": "_1EsMA-TutorialTile-Body-Text-Title",
  "TutorialTile-Body-Text-Action": "_2SKzf-TutorialTile-Body-Text-Action",
  "TutorialTile-Body-Text-Action-Arrow": "_3yHDd-TutorialTile-Body-Text-Action-Arrow",
  "TutorialTile-Status": "XNmOk-TutorialTile-Status",
  "TutorialTile-Notification": "_38ikR-TutorialTile-Notification",
  "TutorialTile-Notification-Dismiss": "_1RXmX-TutorialTile-Notification-Dismiss"
};

function TutorialTile(_ref) {
  var tutorial = _ref.tutorial,
      openTutorial = _ref.openTutorial,
      status = _ref.status,
      children = _ref.children;
  var backgroundColor = tutorial.backgroundColor,
      emoji = tutorial.emoji,
      title = tutorial.title;

  var _useState = (0, _react.useState)(true),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      displayCallout = _useState2[0],
      toggleCallout = _useState2[1];

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.TutorialTile,
    onClick: function onClick() {
      return openTutorial({
        tutorial: tutorial
      });
    },
    onKeyDown: function onKeyDown() {
      return openTutorial({
        tutorial: tutorial
      });
    },
    role: "button",
    tabIndex: 0
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Body']
  }, emoji && /*#__PURE__*/_react["default"].createElement(_components.Avatar, {
    className: classes['TutorialTile-Body-Avatar'],
    hexColor: backgroundColor
  }, emoji), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Body-Text']
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Body-Text-Title']
  }, title, status && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Status']
  }, status)), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Body-Text-Action']
  }, "Start Tutorial", /*#__PURE__*/_react["default"].createElement("i", {
    className: ["".concat(classes['TutorialTile-Body-Text-Action-Arrow'], " fa fa-chevron-right")].join(' ')
  })))), displayCallout && children && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialTile-Notification'],
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    onKeyDown: function onKeyDown(e) {
      return e.stopPropagation();
    },
    role: "button",
    tabIndex: -1
  }, children, /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['TutorialTile-Notification-Dismiss'],
    onClick: function onClick() {
      return toggleCallout(false);
    },
    type: "button"
  }, "Dismiss")));
}

TutorialTile.propTypes = {
  openTutorial: _propTypes["default"].func,
  status: _propTypes["default"].string,
  tutorial: _tutorials.TutorialProp
};
TutorialTile.defaultProps = {
  openTutorial: function openTutorial() {}
};