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

// Components
import Button from '@ui/components/Button';

// Permissions
import { PermissionContext } from '@ui/compositions/Tutorials/Modal';

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

export default function TutorialStepNav(props) {
  const { children, createStep } = props;

  return (
    <PermissionContext.Consumer>
      {readOnly => (
        <div className={classes.TutorialStepNav}>
          {children}
          {!readOnly && (
            <Button className={classes['TutorialStepNav-Button']} onClick={createStep}>
              <i className="fa fa-plus" />
              <span>Add Step</span>
            </Button>
          )}
        </div>
      )}
    </PermissionContext.Consumer>
  );
}
TutorialStepNav.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  createStep: PropTypes.func,
};

TutorialStepNav.defaultProps = {
  children: '',
};
