var React = require('react');
var Link = require('react-router').Link;
var Fluky = require('fluky');

var Toolbar = require('./Toolbar.jsx');
var Blockly = require('./Blockly.jsx');
var WorkBoard = require('./WorkBoard.jsx');
var Notification = require('./Notification.jsx');
var Footer = require('./Footer.jsx');

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

		var tabs = Fluky.getState('Tabs');
		this.state = tabs;

		if (tabs.name === 'components') {
			this.state.boardStyle = 'components';
		}

		if (tabs.name === 'codes') {
			this.state.boardStyle = 'codes';
		}	
	}

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

		if (this.props.params.mode) {
			Fluky.dispatch('action.Core.setMode', this.props.params.mode);
		}
	}

	componentDidMount() {
	    // window.addEventListener('scroll', this.handleScroll);
	}

	componentWillUnmount() {
		Fluky.off('store.Tabs', this.onChange);
	    // window.removeEventListener('scroll', this.handleScroll);
	}

	onChange = () => {
		var tabs = Fluky.getState('Tabs');
		if (tabs.name === 'components') {
			// $('.blocklyToolboxDiv').addClass('hide');
			this.setState({
				'boardStyle': 'components'
			});
		}

		if (tabs.name === 'codes') {
			// $('.blocklyToolboxDiv').removeClass('hide');
			this.setState({
				'boardStyle': 'codes'
			});
		}
	}

	render() {
		var boardStyle = this.state.boardStyle;
		var isWorkboard;
		var isBlockly;
		var genuinoStyle

		if (boardStyle === 'components') {
			isWorkboard = null;
			isBlockly = 'hide';

			genuinoStyle = {
				height: '885px'
			};
		}

		if (boardStyle === 'codes') {
			isBlockly = null;
			isWorkboard = 'hide';

			genuinoStyle = {
				height: '722px'
			};
		}

		return (
			<div className="genuino padding-top-genuino" style={ genuinoStyle }>
				<Toolbar />
				<div className={'row remove-margin ' + boardStyle}>
					<div className="container">
						<div className={ 'col s12 remove-padding ' + isWorkboard }>
							<WorkBoard />
						</div>
						<div className={ 'col s12 remove-padding ' + isBlockly }>
							<Blockly />
						</div>
					</div>
				</div>
				<Footer />
				<Notification />
			</div>
		);
	};
}

module.exports = GenuinoApp;
