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 MainTutorial 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
    });
  }
  previousStep() {
    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;

    switch (step) {
    case 1:
      document.getElementsByClassName('ws-menu')[0].removeAttribute('style');
      x = 96;
      y = -77;
      s = 0.6;
      stepPosHorizontal = 'left';
      stepPosVertical = 'bottom';
      title = (<h4>Workspace</h4>);
      body = (<p>
                This is a Workspace filled with the Widget that you selected.
                You can add up to 4 Widgets per workspace, and you can have as
                many Workspaces as you'd like.
                <br />
                <br />
                Any time you'd like to add another Widget to your current
                Workspace, just click <strong>Edit Workspace</strong>.
              </p>);
      break;
    case 2:
      document.getElementsByClassName('ws-menu')[0].style.display = 'block';
      x = 116;
      y = 56;
      s = 2;
      stepPosHorizontal = 'left';
      stepPosVertical = 'bottom';
      title = (<h4>Editing Workspaces</h4>);
      body = (<p>
                This menu is the main control center for whichever Workspace you're
                currently viewing. You can change the Workspace name, and add up to
                4 total Widgets
              </p>);
      break;
    case 3:
      document.getElementsByClassName('ws-menu')[0].removeAttribute('style');
      x = 95.25;
      y = -42;
      s = 0.45;
      stepPosHorizontal = 'left';
      stepPosVertical = 'bottom';
      title = (<h4>Editing Widgets</h4>);
      body = (<p>
                Each Widget can be closed and removed from the Workspace by
                clicking ( <strong><i className="bzpro-icon-close"></i></strong> ) in
                the top right of the Widget title bar.
                <br />
                <br />
                Clicking the maximize ( <i className="bzpro-icon-maximize"></i> ) icon will
                bring that Widget to a fullscreen view. To return to normal view, click
                thie minimize ( <i className="bzpro-icon-minimize"></i> ) icon.
              </p>);
      break;
    case 4:
      x = 20;
      y = -72;
      s = 1;
      stepPosHorizontal = 'right';
      stepPosVertical = 'bottom';
      title = (<h4>Adding Workspaces</h4>);
      body = (<p>
                If you've filled up your workspace, you can create another by clicking <strong>+ADD</strong> in the Workspaces tab bar.
                <br />
                <br />
                Once you have multiple Workspaces, you can delete those you're done using by clicking the ( <strong><i className="bzpro-icon-close"></i></strong> ) in their respective tab.
              </p>);
      break;
    default:
      completeTutorial('main', this.props.tutorials);
      break;
    }
    this.setState({
      title,
      body,
      x,
      y,
      s
    });
  }
  render() {
    const { step, title, body, x, y, s } = this.state;
    const numSteps = 4;
    return (
      <div className="tut">
        <TutorialStep tutorial="main" title={title} body={body} currentStep={step} numSteps={numSteps} nextStep={() => this.nextStep()} previousStep={() => this.previousStep()} />
        <TutorialOverlay x={x} y={y} s={s} />
      </div>
    );
  }
}

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