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

// Components
import { PermissionContext } from '@views/Tutorials';
import { Avatar, Button } from '@ui/components';
import { TutorialProp } from '@ui/compositions/Tutorials/Modal/proptypes/tutorials';

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

const CardButtonBar = ({
  isAdmin,
  tutorial,
  makeHero,
  shiftOrder,
  numTutorials,
  openTutorial,
  publish,
  deleteTutorial,
}) => {
  const { _id, published, title } = tutorial;
  if (!isAdmin) return false;

  return (
    <React.Fragment>
      <button
        className={classes['TutorialCard-Toolbar-Arrow']}
        disabled={tutorial.order === 0}
        onClick={() => shiftOrder({ _id, direction: -1 })}
      >
        <i className="fa fa-arrow-left" />
      </button>
      <button
        className={classes['TutorialCard-Toolbar-Arrow']}
        disabled={tutorial.order === numTutorials - 1}
        onClick={() => shiftOrder({ _id, direction: 1 })}
      >
        <i className="fa fa-arrow-right" />
      </button>
      <button className={classes['TutorialCard-Toolbar-Button']} onClick={() => openTutorial('Edit', tutorial)}>
        Edit
      </button>
      <button
        className={classes['TutorialCard-Toolbar-Button']}
        disabled={tutorial.hero}
        onClick={() => publish({ _id, published: !published })}
        title={tutorial.hero ? 'You can’t unpublish a featured Recipe' : ''}
      >
        {tutorial.published ? 'Unpublish' : 'Publish'}
      </button>
      {!tutorial.hero && (
        <button
          className={classes['TutorialCard-Toolbar-Button']}
          disabled={tutorial.hero}
          onClick={() => makeHero({ _id, published })}
        >
          Feature
        </button>
      )}
      <button
        className={[classes['TutorialCard-Toolbar-Button'], classes['TutorialCard-Toolbar-Button_red']].join(' ')}
        disabled={tutorial.hero && numTutorials > 1}
        onClick={() => deleteTutorial({ _id, title })}
        title={tutorial.hero ? numTutorials > 1 && 'You can’t delete a featured Recipe' : ''}
      >
        Delete
      </button>
    </React.Fragment>
  );
};

CardButtonBar.propTypes = {
  deleteTutorial: PropTypes.func,
  isAdmin: PropTypes.bool,
  makeHero: PropTypes.func,
  numTutorials: PropTypes.number,
  openTutorial: PropTypes.func,
  publish: PropTypes.func,
  shiftOrder: PropTypes.func,
  tutorial: TutorialProp,
};

const renderStatus = (isAdmin, tutorial) => {
  const { hero, published } = tutorial;
  if (!isAdmin) return false;
  if (hero || !published) {
    return (
      <div className={[classes['TutorialCard-Status'], hero ? classes['TutorialCard-Status_featured'] : ''].join(' ')}>
        <i className={[classes['TutorialCard-Status-Icon'], hero ? 'fa fa-star' : 'icon icon-eye-crossed'].join(' ')} />
        {hero ? 'Featured' : 'Not Published'}
      </div>
    );
  }
  return false;
};

export default function TutorialCard({
  tutorialReview,
  className,
  numTutorials,
  tutorial,
  makeHero,
  openTutorial,
  publish,
  shiftOrder,
  deleteTutorial,
}) {
  const TutorialCardClasses = [
    className,
    classes.TutorialCard,
    !tutorial.published && !tutorialReview && classes.TutorialCard_unpublished,
  ]
    .filter(e => e)
    .join(' ');
  return (
    <section className={TutorialCardClasses}>
      <div className={classes['TutorialCard-Top']}>
        <PermissionContext.Consumer>
          {isAdmin => renderStatus(isAdmin && !tutorialReview, tutorial)}
        </PermissionContext.Consumer>
        {tutorial.emoji && (
          <Avatar className={classes['TutorialCard-Avatar']} hexColor={tutorial.backgroundColor}>
            {tutorial.emoji}
          </Avatar>
        )}
        <div className={classes['TutorialCard-Title']}>{tutorial.title}</div>
        <div className={classes['TutorialCard-Description']}>{tutorial.description} </div>
        <div className={classes['TutorialCard-Steps']}>{tutorial.stepCount} Steps</div>
        <Button
          bem={{ blue: true }}
          className={classes['TutorialCard-Button']}
          onClick={() => openTutorial('View', tutorial)}
        >
          Open Recipe
        </Button>
      </div>
      <PermissionContext.Consumer>
        {isAdmin => (
          <footer className={classes['TutorialCard-Toolbar']}>
            <div className={classes['TutorialCard-Toolbar-Wrapper']}>
              <CardButtonBar
                deleteTutorial={deleteTutorial}
                isAdmin={isAdmin && !tutorialReview}
                makeHero={makeHero}
                numTutorials={numTutorials}
                openTutorial={openTutorial}
                publish={publish}
                shiftOrder={shiftOrder}
                tutorial={tutorial}
              />
            </div>
          </footer>
        )}
      </PermissionContext.Consumer>
    </section>
  );
}

TutorialCard.propTypes = {
  deleteTutorial: PropTypes.func,
  makeHero: PropTypes.func,
  numTutorials: PropTypes.number,
  openTutorial: PropTypes.func,
  publish: PropTypes.func,
  shiftOrder: PropTypes.func,
  tutorial: TutorialProp,
  tutorialReview: PropTypes.bool,
};

TutorialCard.defaultProps = {
  tutorialReview: false,
};
