"use strict";

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

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

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

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

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

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

// Core
// Components
// Readme Libs
var syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter/dist/index.js')["default"] : function () {}; // Style

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",
  "TutorialHero": "_1zI4T-TutorialHero",
  "TutorialHero-Col": "_2s6nH-TutorialHero-Col",
  "TutorialHero-Col-Title": "-Z3cM-TutorialHero-Col-Title",
  "TutorialHero-Col-Description": "_2ludo-TutorialHero-Col-Description",
  "TutorialHero-Col-Heading": "t1wdZ-TutorialHero-Col-Heading",
  "TutorialHero-Col-List": "_2I--5-TutorialHero-Col-List",
  "TutorialHero-Col-List_ellipsis": "_1dWqO-TutorialHero-Col-List_ellipsis",
  "TutorialHero-Col-List-Item": "_1euMl-TutorialHero-Col-List-Item",
  "TutorialHero-Col-Ellipsis": "_1VrUz-TutorialHero-Col-Ellipsis",
  "TutorialHero-Col-Ellipsis-Popup": "_2KAdY-TutorialHero-Col-Ellipsis-Popup",
  "TutorialHero-Col-Button": "_1Puhq-TutorialHero-Col-Button",
  "TutorialHero-Col-Button-Emoji": "_2q37I-TutorialHero-Col-Button-Emoji",
  "TutorialHero-Image": "_1iqRc-TutorialHero-Image",
  "TutorialHero-Image-TutorialEditor-Nav": "_2pt1J-TutorialHero-Image-TutorialEditor-Nav",
  "TutorialHero-Image-TutorialEditor-Nav-Button": "_2oa4W-TutorialHero-Image-TutorialEditor-Nav-Button"
};

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

TutorialHero.propTypes = {
  hero: _tutorials.TutorialProp.isRequired,
  openTutorial: _propTypes["default"].func.isRequired
};
var _default = TutorialHero;
exports["default"] = _default;