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 CalendarTutorial 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 Calendar Widget!</h4>);
      body = (<p>
                These financial calendars allow you to assess a company’s rating,
                find upcoming earnings and scheduled conference calls, and more
                economic events such as dividends. Use the top left dropdown to
                switch between calendar event types. You can filter results to a
                specific date range. Search for events related individual companies
                by searching their symbol in the top right of the widget.
                <br />
                <br />
                From the widget settings (<strong><i className="bzpro-icon-options"></i></strong>),
                you can choose which columns are displayed in the widget.
              </p>);
      break;
    default:
      completeTutorial('calendar', 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="calendar" title={title} body={body} currentStep={step} numSteps={numSteps} nextStep={() => this.nextStep()} />
        <TutorialOverlay x={x} y={y} s={s} hidden={hidden}/>
      </div>
    );
  }
}

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