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

export default class SecurityTutorial extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      title: null,
      body: null,
      shape: null,
      x: 0,
      y: 0,
      s: 1
    };
  }
  componentDidMount() {
    this.goToStep(this.state.step);
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.step !== this.state.step) this.goToStep(this.state.step);
  }
  nextStep() {
    this.setState({
      step: this.state.step + 1
    });
  }
  goToStep(step) {
    let x = null;
    let y = null;
    let s = null;
    let stepPosHorizontal = null;
    let stepPosVertical = null;
    let title = null;
    let body = null;
    let hidden = null;

    switch (step) {
    case 1:
      x = 0;
      y = 0;
      s = 0;
      hidden = true;
      stepPosHorizontal = 'left';
      stepPosVertical = 'bottom';
      title = (<h4>Welcome to your first Security Page!</h4>);
      body = (<p>
                Security Pages provide an overview for a symbol, including key stats,
                a price chart, economic events, and related news.
                <br />
                <br />
                From the widget settings menu ( <strong><i className="bzpro-icon-options"></i></strong> ),
                you can search for a new symbol and choose which sections you would like displayed in the widget.
              </p>);
      break;
    default:
      completeTutorial('security', this.props.tutorials);
      break;
    }
    this.setState({
      title,
      body,
      x,
      y,
      s,
      hidden
    });
  }
  render() {
    const { step, title, body, x, y, s, hidden } = this.state;
    const numSteps = 1;
    return (
      <div className="tut">
        <TutorialStep tutorial="security" title={title} body={body} currentStep={step} numSteps={numSteps} nextStep={() => this.nextStep()} />
        <TutorialOverlay x={x} y={y} s={s} hidden={hidden}/>
      </div>
    );
  }
}

SecurityTutorial.propTypes = {
  tutorials: React.PropTypes.object
};