// Core
import React from 'react';
import PropTypes from 'prop-types';

// Components
import { Button, Title } from '../../../../ui/components';
import CodeEditor from '../../../../ui/compositions/CodeEditor';
import { TutorialProp } from '../../../../ui/compositions/TutorialModal/proptypes/tutorials';

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

var TutorialHero = function TutorialHero(_ref) {
  var hero = _ref.hero,
      openTutorial = _ref.openTutorial;
  return React.createElement(
    'section',
    { className: classes.TutorialHero },
    React.createElement(
      'div',
      { className: classes['TutorialHero-Col'] },
      React.createElement(
        Title,
        { className: classes['TutorialHero-Col-Title'], level: 1 },
        hero.title
      ),
      React.createElement(
        'span',
        { className: classes['TutorialHero-Col-Description'] },
        hero.description
      ),
      hero.steps && hero.steps.length > 0 && React.createElement(
        React.Fragment,
        null,
        React.createElement(
          'div',
          { className: classes['TutorialHero-Col-Heading'] },
          'IN THIS TUTORIAL'
        ),
        React.createElement(
          'ol',
          { className: classes['TutorialHero-Col-List'] },
          hero.steps.slice(0, 3).map(function (step, i) {
            return React.createElement(
              'li',
              { key: i, className: classes['TutorialHero-Col-List-Item'] },
              step.title
            );
          })
        )
      ),
      hero.steps && hero.steps.length > 4 && React.createElement(
        'button',
        { className: classes['TutorialHero-Col-Ellipsis'], type: 'button' },
        '\u2022\u2022\u2022',
        React.createElement(
          'div',
          { className: classes['TutorialHero-Col-Ellipsis-Popup'] },
          React.createElement(
            'ol',
            { className: [classes['TutorialHero-Col-List'], classes['TutorialHero-Col-List_ellipsis']].join(' ') },
            hero.steps.slice(3).map(function (step, i) {
              return React.createElement(
                'li',
                { key: i, className: classes['TutorialHero-Col-List-Item'] },
                step.title
              );
            })
          )
        )
      ),
      React.createElement(
        Button,
        { className: classes['TutorialHero-Col-Button'], onClick: function onClick() {
            return openTutorial('View', hero._id);
          }, size: 'lg' },
        React.createElement(
          'span',
          { className: classes['TutorialHero-Col-Button-Emoji'] },
          hero.emoji
        ),
        React.createElement(
          'span',
          null,
          'Start Tutorial'
        )
      )
    ),
    React.createElement(
      'div',
      { className: classes['TutorialHero-Image'] },
      React.createElement(
        'div',
        { className: classes['TutorialHero-Image-TutorialEditor-Nav'] },
        hero.snippet && hero.snippet.codeOptions.map(function (_ref2) {
          var name = _ref2.name;
          return React.createElement(
            Button,
            {
              key: name,
              bem: { white_text: true },
              className: classes['TutorialHero-Image-TutorialEditor-Nav-Button']
            },
            name
          );
        })
      ),
      React.createElement(CodeEditor, {
        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'
      })
    )
  );
};

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

export default TutorialHero;