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

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

// Readme Libs
const syntaxHighlighter =
  typeof window !== 'undefined' ? require('@readme/syntax-highlighter/dist/index.js').default : () => {};

// Style
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined') classes = require('./style.module.scss');

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

TutorialHero.propTypes = {
  hero: TutorialProp.isRequired,
  openTutorial: PropTypes.func.isRequired,
};

export default TutorialHero;
