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

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

		this.state = {
			'tipsMode': Fluky.getState('Tips').tipsMode,
			'tips': Fluky.getState('Tips').tips,
			'samples': Fluky.getState('Tips').samples,
			'showMsg': false
		}
	}

	componentWillMount() {
		Fluky.on('store.Tips', Fluky.bindListener(this.onChange));
	}

	componentWillUmount() {
		Fluky.off('store.Tips', this.onChange);
	}

	onChange = () => {
		var store = Fluky.getState('Tips');

		this.setState({
			'tipsMode': store.tipsMode,
			'tips': store.tips,
			'samples': store.samples
		});
	}

	close = () => {
		$('.component-tips').addClass('hide');
    }

    useSampleCode = () => {
    	this.setState({
			'showMsg': true
		});
    }

    closeMsg = () => {
    	this.setState({
			'showMsg': false
		});
    }

    showSampleCode = () => {
		if (!this.state.samples.length)
			return;

		this.closeMsg();
		Fluky.dispatch('action.Tabs.setTabs', 'codes');
		Fluky.dispatch('action.MatchUp.applySampleCode', this.state.samples[0]);
    }

	render() {
		// if (!this.state.tipsMode) {
		// 	return null;
		// }
		var demoMsg = null;
		var { tips, showMsg } = this.state;
		var linkDemo;
		var linkSupport;

		if (tips) {
			linkDemo = <a className={'pull-right last-btn'} href='#' onClick={this.useSampleCode}>2. 逻辑范例</a>;
			linkSupport = <a className={'pull-right'} href='#'>1. 模块支持</a>;	
		}
		if (showMsg) {
			demoMsg = <div className={'col s2 demo-msg'}>
					<div className="card amber z-depth-3 animated rubberBand">
						<div className="card-content">
							<span className="card-title">使用逻辑范例</span>
							<p>使用逻辑范例将清除现有的状态</p>
						</div>
						<div className="card-action">
							<a href="#" onClick={this.closeMsg}>取消</a>
							<a href="#" onClick={this.showSampleCode}>确认</a>
						</div>
					</div>
				</div>;
		}

		return (
			<div>
				<p className="content z-depth-2">
					<span className="pull-right"><i className="material-icons icon-close" onClick={ this.close }>cancel</i></span>
					{ tips || '! 说明：' }
					<br />
					{ linkDemo }
					{ linkSupport }
				</p>
				{ demoMsg }
			</div>
		);
	}
};

module.exports = Tips;
