import React from 'react';
import Fluky from 'fluky';

var dropArrow = require('../../images/drop-arrow.png');
var tipsArrow = require('../../images/tips-arrow.png');

var Tutorial = React.createClass({
    getInitialState() {
        return { 'tutorialIndex': 0 };
    },
    nextStep() {
    	var index = this.state.tutorialIndex;
		var tips = Fluky.getState('WorkBoard').modules.sensors[0].tips;
		var samples = Fluky.getState('WorkBoard').modules.sensors[0].samples[0];
		var sku1 = samples.modules[0].sku;
		var pin1 = samples.modules[0].pin;
		var sku2 = samples.modules[1].sku;
		var pin2 = samples.modules[1].pin;

    	index = index + 1;

    	if (index === 1) {
    		Fluky.dispatch('action.WorkBoard.connectModule', sku1, pin1);
    		Fluky.dispatch('action.WorkBoard.connectModule', sku2, pin2);
    		Fluky.dispatch('action.Tips.setTips', tips, null);
    	}

    	if (index === 4) {
    		Fluky.dispatch('action.Tabs.setTabs', 'codes');
			Fluky.dispatch('action.MatchUp.applySampleCode', samples);
    	}

        this.setState({ 'tutorialIndex': index });
    },
    close() {
    	var index = this.props.steps.length;

		Fluky.dispatch('action.Tabs.setTabs', 'components');

        this.setState({ 'tutorialIndex': index });
    },
    componentDidUpdate() {
	  var node = this.getDOMNode();
	  node.scrollTop = node.scrollHeight;
	},
    render() {
    	var index = this.state.tutorialIndex;
    	var lastStep;
    	var arrowImg = null;
    	
    	if (index === this.props.steps.length - 1) {
    		lastStep = {
				display: 'none'
			};
    	}
    	// close tutorial
    	if (index === this.props.steps.length) {
    		return null;
    	}

    	var title = this.props.steps[index].title;
    	var content = this.props.steps[index].content;
    	var position = this.props.steps[index].position;
    	var arrowClass = 'arrow-left';

		if (index === 1) {
    		arrowImg = <img className="arrow-2 animated bounceInLeft" src={ dropArrow } />;
    	}
    	if (index === 2) {
    		arrowClass = null;
    		arrowImg = <img className="arrow-3 animated bounceInLeft" src={ tipsArrow } />;
    	}
    	if (index === 3) {
    		arrowClass = 'arrow-top';
    	}
    	if (index === 4) {
    		arrowClass = 'arrow-left-codes';
    	}
    	if (index === 5) {
    		arrowClass = 'arrow-left-codes';
    	}
    	if (index === 6) {
    		arrowClass = null;
    	}


        return (
        	<div>
	        	<div className="overlay"></div>
	            <div className={'row tutorial ' + position }>
			        <div className="col s12">
			        	<div className={ 'animated bounceInLeft ' + arrowClass }></div>
						<div className="card light-blue lighten-2 z-depth-3 animated bounceInLeft">
							<div className="card-content white-text">
								<span className="card-title">{ title }</span>
								<p>{ content }</p>
							</div>
							<div className="card-action">
								<a href="#" onClick={ this.close }>关闭</a>
								<a className="pull-right" href="#" style={ lastStep } onClick={ this.nextStep }><i className="material-icons next">keyboard_arrow_right</i></a>
							</div>
						</div>
					</div>
					<div className="col s12">
						{ arrowImg }
					</div>
				</div>
			</div>
        );
    }
});

class Notification extends React.Component {
	constructor() {
		super();

		this.state = {
			'tutorialMode': Fluky.getState('Core').tutorialMode,
			'steps': Fluky.getState('Core').steps
		}
	}
	componentWillMount() {
		Fluky.on('store.Core', Fluky.bindListener(this.onChange));
	}
	componentWillUmount() {
		Fluky.off('store.Core', this.onChange);
	}
	onChange = () => {
		this.setState({
			'tutorialMode': Fluky.getState('Core').tutorialMode,
			'steps': Fluky.getState('Core').steps
		});
	}
	render() {
		if (!this.state.tutorialMode) {
			return null;
		}
		var { steps } = this.state;

		$('html, body').stop().animate({
			scrollTop: '0'
		}, 400);

		return (
			<Tutorial steps={ steps } />
		);
	}
}

module.exports = Notification;
