// 3rd-party libs
import React from 'react';
import PropTypes from 'prop-types';

// Components
import { PermissionContext } from '../../../views/Tutorials';
import { Avatar, Button } from '../../components';
import { TutorialProp } from '../TutorialModal/proptypes/tutorials';

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

var CardButtonBar = function CardButtonBar(_ref) {
  var isAdmin = _ref.isAdmin,
      tutorial = _ref.tutorial,
      makeHero = _ref.makeHero,
      shiftOrder = _ref.shiftOrder,
      numTutorials = _ref.numTutorials,
      openTutorial = _ref.openTutorial,
      updateTutorial = _ref.updateTutorial,
      deleteTutorial = _ref.deleteTutorial;
  var _id = tutorial._id;

  if (!isAdmin) return false;

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      'button',
      {
        className: classes['TutorialCard-Toolbar-Arrow'],
        disabled: tutorial.order === 0,
        onClick: function onClick() {
          return shiftOrder({ _id: _id, direction: -1 });
        }
      },
      React.createElement('i', { className: 'fa fa-arrow-left' })
    ),
    React.createElement(
      'button',
      {
        className: classes['TutorialCard-Toolbar-Arrow'],
        disabled: tutorial.order === numTutorials - 1,
        onClick: function onClick() {
          return shiftOrder({ _id: _id, direction: 1 });
        }
      },
      React.createElement('i', { className: 'fa fa-arrow-right' })
    ),
    React.createElement(
      'button',
      { className: classes['TutorialCard-Toolbar-Button'], onClick: function onClick() {
          return openTutorial('Edit', _id);
        } },
      'Edit'
    ),
    React.createElement(
      'button',
      {
        className: classes['TutorialCard-Toolbar-Button'],
        onClick: function onClick() {
          return updateTutorial({ _id: _id, published: !tutorial.published });
        }
      },
      tutorial.published ? 'Unpublish' : 'Publish'
    ),
    !tutorial.hero && React.createElement(
      'button',
      {
        className: classes['TutorialCard-Toolbar-Button'],
        disabled: tutorial.hero,
        onClick: function onClick() {
          return makeHero({ _id: _id });
        }
      },
      'Make Hero'
    ),
    React.createElement(
      'button',
      {
        className: [classes['TutorialCard-Toolbar-Button'], classes['TutorialCard-Toolbar-Button_red']].join(' '),
        onClick: function onClick() {
          return deleteTutorial({ _id: _id });
        }
      },
      'Delete'
    )
  );
};

CardButtonBar.propTypes = process.env.NODE_ENV !== "production" ? {
  deleteTutorial: PropTypes.func,
  isAdmin: PropTypes.bool,
  makeHero: PropTypes.func,
  numTutorials: PropTypes.number,
  openTutorial: PropTypes.func,
  shiftOrder: PropTypes.func,
  tutorial: TutorialProp,
  updateTutorial: PropTypes.func
} : {};

var renderStatus = function renderStatus(isAdmin, tutorial) {
  var hero = tutorial.hero,
      published = tutorial.published;

  if (!isAdmin) return false;
  if (hero || !published) {
    return React.createElement(
      'div',
      { className: classes['TutorialCard-Status'] },
      React.createElement('i', { className: [classes['TutorialCard-Status-Icon'], 'icon', 'icon-eye-crossed'].join(' ') }),
      hero ? 'Shown in Hero' : 'Not Published'
    );
  }
  return false;
};

export default function TutorialCard(_ref2) {
  var tutorialReview = _ref2.tutorialReview,
      className = _ref2.className,
      numTutorials = _ref2.numTutorials,
      tutorial = _ref2.tutorial,
      makeHero = _ref2.makeHero,
      openTutorial = _ref2.openTutorial,
      updateTutorial = _ref2.updateTutorial,
      shiftOrder = _ref2.shiftOrder,
      deleteTutorial = _ref2.deleteTutorial;

  var TutorialCardClasses = [className, classes.TutorialCard, !tutorial.published && classes.TutorialCard_unpublished].filter(function (e) {
    return e;
  }).join(' ');
  return React.createElement(
    'section',
    { className: TutorialCardClasses },
    React.createElement(
      'div',
      { className: classes['TutorialCard-Top'] },
      React.createElement(
        PermissionContext.Consumer,
        null,
        function (isAdmin) {
          return renderStatus(isAdmin && !tutorialReview, tutorial);
        }
      ),
      tutorial.emoji && React.createElement(
        Avatar,
        { className: classes['TutorialCard-Avatar'], hexColor: tutorial.backgroundColor },
        tutorial.emoji
      ),
      React.createElement(
        'div',
        { className: classes['TutorialCard-Title'] },
        tutorial.title
      ),
      React.createElement(
        'div',
        { className: classes['TutorialCard-Description'] },
        tutorial.description,
        ' '
      ),
      React.createElement(
        'div',
        { className: classes['TutorialCard-Steps'] },
        tutorial.stepCount,
        ' Steps'
      ),
      React.createElement(
        Button,
        {
          bem: { blue: true },
          className: classes['TutorialCard-Button'],
          onClick: function onClick() {
            return openTutorial('View', tutorial._id);
          }
        },
        'Start Tutorial'
      )
    ),
    React.createElement(
      'footer',
      { className: classes['TutorialCard-Toolbar'] },
      React.createElement(
        PermissionContext.Consumer,
        null,
        function (isAdmin) {
          return React.createElement(CardButtonBar, {
            deleteTutorial: deleteTutorial,
            isAdmin: isAdmin && !tutorialReview,
            makeHero: makeHero,
            numTutorials: numTutorials,
            openTutorial: openTutorial,
            shiftOrder: shiftOrder,
            tutorial: tutorial,
            updateTutorial: updateTutorial
          });
        }
      )
    )
  );
}

TutorialCard.propTypes = process.env.NODE_ENV !== "production" ? {
  deleteTutorial: PropTypes.func,
  makeHero: PropTypes.func,
  numTutorials: PropTypes.number,
  openTutorial: PropTypes.func,
  shiftOrder: PropTypes.func,
  tutorial: TutorialProp,
  tutorialReview: PropTypes.bool,
  updateTutorial: PropTypes.func
} : {};

TutorialCard.defaultProps = {
  tutorialReview: false
};