'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _CodeEditor = require('../../../../ui/compositions/CodeEditor');

var _CodeEditor2 = _interopRequireDefault(_CodeEditor);

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

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

var _styleModule2 = _interopRequireDefault(_styleModule);

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

// Components
// Core
var TutorialHero = function TutorialHero(_ref) {
  var hero = _ref.hero,
      openTutorial = _ref.openTutorial;
  return _react2.default.createElement(
    'section',
    { className: _styleModule2.default.TutorialHero },
    _react2.default.createElement(
      'div',
      { className: _styleModule2.default['TutorialHero-Col'] },
      _react2.default.createElement(
        _components.Title,
        { className: _styleModule2.default['TutorialHero-Col-Title'], level: 1 },
        hero.title
      ),
      _react2.default.createElement(
        'span',
        { className: _styleModule2.default['TutorialHero-Col-Description'] },
        hero.description
      ),
      hero.steps && hero.steps.length > 0 && _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          'div',
          { className: _styleModule2.default['TutorialHero-Col-Heading'] },
          'IN THIS TUTORIAL'
        ),
        _react2.default.createElement(
          'ol',
          { className: _styleModule2.default['TutorialHero-Col-List'] },
          hero.steps.slice(0, 3).map(function (step, i) {
            return _react2.default.createElement(
              'li',
              { key: i, className: _styleModule2.default['TutorialHero-Col-List-Item'] },
              step.title
            );
          })
        )
      ),
      hero.steps && hero.steps.length > 4 && _react2.default.createElement(
        'button',
        { className: _styleModule2.default['TutorialHero-Col-Ellipsis'], type: 'button' },
        '\u2022\u2022\u2022',
        _react2.default.createElement(
          'div',
          { className: _styleModule2.default['TutorialHero-Col-Ellipsis-Popup'] },
          _react2.default.createElement(
            'ol',
            { className: [_styleModule2.default['TutorialHero-Col-List'], _styleModule2.default['TutorialHero-Col-List_ellipsis']].join(' ') },
            hero.steps.slice(3).map(function (step, i) {
              return _react2.default.createElement(
                'li',
                { key: i, className: _styleModule2.default['TutorialHero-Col-List-Item'] },
                step.title
              );
            })
          )
        )
      ),
      _react2.default.createElement(
        _components.Button,
        { className: _styleModule2.default['TutorialHero-Col-Button'], onClick: function onClick() {
            return openTutorial('View', hero._id);
          }, size: 'lg' },
        _react2.default.createElement(
          'span',
          { className: _styleModule2.default['TutorialHero-Col-Button-Emoji'] },
          hero.emoji
        ),
        _react2.default.createElement(
          'span',
          null,
          'Start Tutorial'
        )
      )
    ),
    _react2.default.createElement(
      'div',
      { className: _styleModule2.default['TutorialHero-Image'] },
      _react2.default.createElement(
        'div',
        { className: _styleModule2.default['TutorialHero-Image-TutorialEditor-Nav'] },
        hero.snippet && hero.snippet.codeOptions.map(function (_ref2) {
          var name = _ref2.name;
          return _react2.default.createElement(
            _components.Button,
            {
              key: name,
              bem: { white_text: true },
              className: _styleModule2.default['TutorialHero-Image-TutorialEditor-Nav-Button']
            },
            name
          );
        })
      ),
      _react2.default.createElement(_CodeEditor2.default, {
        autoScroll: true,
        className: 'CodeEditor-Input CodeEditor-Input_readonly',
        code: hero.snippet ? hero.snippet.codeOptions[0].code : '',
        lang: hero.snippet ? hero.snippet.codeOptions[0].language : 'javascript'
      })
    )
  );
};

// Internals


TutorialHero.propTypes = process.env.NODE_ENV !== "production" ? {
  hero: _tutorials.TutorialProp.isRequired,
  openTutorial: _propTypes2.default.func.isRequired
} : {};

exports.default = TutorialHero;
module.exports = exports['default'];