import React from 'react';
import classnames from 'classnames';
import Immutable from 'immutable';
import TutorialOverlay from './TutorialOverlay';
import ProgressBar from 'components/ui/ProgressBar';
import { completeTutorial } from 'actions/tutorials';

export default class TutorialStep extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { tutorial, tutorials, title, body, numSteps, currentStep } = this.props;
    const buttonText = currentStep === numSteps ? 'bzpro-icon-check' : 'bzpro-icon-next';
    return (
      <div className="tut-step">
        <button className="tut-step__close" onClick={() => completeTutorial(tutorial, tutorials)}><i className="bzpro-icon-close"></i></button>
        <div className="tut-step__content">
          {title}
          {body}
        </div>
        <div className="tut-step__controls">
          {numSteps > 1 && <ProgressBar max={numSteps} value={currentStep} classes="tut__progress"/>}
          {currentStep > 1 &&
            <button className="tut-step__prev" onClick={() => this.props.previousStep()}>
              <i className="bzpro-icon-previous"></i>
            </button>
          }
          {numSteps > 1 &&
            <button className="tut-step__next" onClick={() => this.props.nextStep()}>
              <i className={buttonText}></i>
            </button>
          }
          {numSteps <= 1 &&
            <button className="tut-step__continue" onClick={() => this.props.nextStep()}>
              CONTINUE
            </button>
          }
        </div>
      </div>
    );
  }
}

TutorialStep.propTypes = {
  tutorial: React.PropTypes.string,
  tutorials: React.PropTypes.object,
  title: React.PropTypes.node,
  body: React.PropTypes.node,
  numSteps: React.PropTypes.number,
  currentStep: React.PropTypes.number,
  nextStep: React.PropTypes.func,
  previousStep: React.PropTypes.func
};