// 3rd-party libs
import React, { useState } from 'react';
import PropTypes from 'prop-types';

// Components
import { Avatar } from '../../components';
import { TutorialProp } from '../TutorialModal/proptypes/tutorials';

// Style
import classes from './style.module.scss';

export default 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 = useState(true),
      displayCallout = _useState[0],
      toggleCallout = _useState[1];

  return React.createElement(
    'div',
    {
      className: classes.TutorialTile,
      onClick: function onClick() {
        return openTutorial({ tutorial: tutorial });
      },
      onKeyDown: function onKeyDown() {
        return openTutorial({ tutorial: tutorial });
      },
      role: 'button',
      tabIndex: 0
    },
    React.createElement(
      'div',
      { className: classes['TutorialTile-Body'] },
      emoji && React.createElement(
        Avatar,
        { hexColor: backgroundColor },
        emoji
      ),
      React.createElement(
        'div',
        { className: classes['TutorialTile-Body-Text'] },
        React.createElement(
          'div',
          { className: classes['TutorialTile-Body-Text-Title'] },
          title,
          status && React.createElement(
            'div',
            { className: classes['TutorialTile-Status'] },
            status
          )
        ),
        React.createElement(
          'div',
          { className: classes['TutorialTile-Body-Text-Action'] },
          'Start Tutorial',
          React.createElement('i', { className: [classes['TutorialTile-Body-Text-Action-Arrow'] + ' fa fa-chevron-right'].join(' ') })
        )
      )
    ),
    displayCallout && children && React.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,
      React.createElement(
        'button',
        {
          className: classes['TutorialTile-Notification-Dismiss'],
          onClick: function onClick() {
            return toggleCallout(false);
          },
          type: 'button'
        },
        'Dismiss'
      )
    )
  );
}

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

TutorialTile.defaultProps = {
  openTutorial: function openTutorial() {}
};