var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import R from 'ramda';
import React from 'react';
import { findDOMNode } from 'react-dom';
import seeds, { Seed } from 'react-seeds';
import { action } from 'mobx';
import { observer } from 'mobx-react';

import destinations from './destinations';

import * as colors from './colors';
import * as stylers from './stylers';
import Button from './ui/Button';
import Field from './ui/Field';
import Choice from './ui/Choice';
import IngredientsEditor from './sections/IngredientsEditor';
import PreviewSection from './sections/preview';

import createObservableState from './state';

export default observer(React.createClass({
	getDefaultProps: function getDefaultProps() {
		return {
			autofocus: false,
			showTree: false,
			backgroundColor: '#191919'
		};
	},
	componentWillMount: function componentWillMount() {
		var _this = this;

		this.onSourceChange = action(function (content) {
			_this.props.stateManager.content = content;
		});
		this.onChangeDestination = action(function (newDestinationID) {
			_this.props.stateManager.destinationID = newDestinationID;
		});
		this.onPhoneDestination = action(function () {
			_this.props.stateManager.destinationDevice = 'phone';
		});
		this.onFullDestination = action(function () {
			_this.props.stateManager.destinationDevice = 'full';
		});
	},
	onSetUpMainField: function onSetUpMainField(component) {
		var el = findDOMNode(component);
		if (!!el && this.props.autofocus) {
			el.focus();
		}
	},
	onClickDrag: function onClickDrag(_ref) {
		var type = _ref.type,
		    currentTarget = _ref.currentTarget,
		    target = _ref.target,
		    clientX = _ref.clientX;

		if (type === 'mouseup') {
			this.dragging = false;
		} else if (this.dragging || type === 'mousedown') {
			if (type === 'mousemove') {
				currentTarget.scrollLeft += this.mouseX - clientX;
			}

			// Only allow clicking on background
			if (target.tagName === 'DIV') {
				this.dragging = true;
				this.mouseX = clientX;
			}
		}
	},
	render: function render() {
		var _props = this.props,
		    showTree = _props.showTree,
		    stateManager = _props.stateManager,
		    backgroundColor = _props.backgroundColor;
		var content = stateManager.content,
		    contentTree = stateManager.contentTree,
		    ingredients = stateManager.ingredients,
		    activeIngredients = stateManager.activeIngredients,
		    scenarios = stateManager.scenarios,
		    activeScenarioIndex = stateManager.activeScenarioIndex,
		    destinationID = stateManager.destinationID,
		    destinationDevice = stateManager.destinationDevice;


		var scenario = scenarios[activeScenarioIndex];

		console.dir(scenario);
		console.dir(contentTree);
		console.dir(activeIngredients);

		return React.createElement(
			Seed,
			{ row: true, justifyContent: 'center',
				grow: 0, shrink: 0,
				background: { color: backgroundColor }
			},
			React.createElement(
				Seed,
				{ row: true,
					grow: 1, shrink: 2,
					minWidth: 320,
					overflow: 'scroll',
					onMouseDown: this.onClickDrag,
					onMouseMove: this.onClickDrag,
					onMouseUp: this.onClickDrag
				},
				React.createElement(
					Seed,
					_extends({ column: true,
						grow: 1
					}, stylers.mainColumn),
					React.createElement(Field, _extends({
						ref: this.onSetUpMainField,
						value: content,
						onChange: this.onSourceChange
					}, stylers.sourceField))
				),
				React.createElement(
					Seed,
					{ column: true },
					React.createElement(IngredientsEditor, {
						ingredients: ingredients,
						ingredientIDToVariationIndex: scenario,
						onAddNew: stateManager.addNewIngredient,
						onRemoveAtIndex: stateManager.onRemoveIngredientAtIndex,
						onAddVariationAtIndex: stateManager.onAddVariationAtIndex
					})
				)
			),
			showTree && React.createElement(
				Seed,
				_extends({ row: true, grow: 1, shrink: 1
				}, stylers.preview),
				React.createElement(
					'pre',
					null,
					!!contentTree ? JSON.stringify(contentTree, null, 2) : null
				)
			),
			React.createElement(PreviewSection, {
				contentTree: contentTree,
				ingredients: activeIngredients,
				destinationID: destinationID,
				destinationDevice: destinationDevice,
				destinations: destinations,
				onChangeDestination: this.onChangeDestination,
				onPhoneDestination: this.onPhoneDestination,
				onFullDestination: this.onFullDestination
			})
		);
	}
}));