'use strict';

exports.__esModule = true;
exports.default = TutorialTile;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _tutorials = require('../TutorialModal/proptypes/tutorials');

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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),
      displayCallout = _useState[0],
      toggleCallout = _useState[1];

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

// Style


// Components
// 3rd-party libs


TutorialTile.propTypes = process.env.NODE_ENV !== "production" ? {
  openTutorial: _propTypes2.default.func,
  status: _propTypes2.default.string,
  tutorial: _tutorials.TutorialProp
} : {};

TutorialTile.defaultProps = {
  openTutorial: function openTutorial() {}
};
module.exports = exports['default'];