'use strict';

exports.__esModule = true;

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; };

var _ramda = require('ramda');

var _ramda2 = _interopRequireDefault(_ramda);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactSeeds = require('react-seeds');

var _reactSeeds2 = _interopRequireDefault(_reactSeeds);

var _mobx = require('mobx');

var _mobxReact = require('mobx-react');

var _destinations = require('./destinations');

var _destinations2 = _interopRequireDefault(_destinations);

var _colors = require('./colors');

var colors = _interopRequireWildcard(_colors);

var _stylers = require('./stylers');

var stylers = _interopRequireWildcard(_stylers);

var _Button = require('./ui/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Field = require('./ui/Field');

var _Field2 = _interopRequireDefault(_Field);

var _Choice = require('./ui/Choice');

var _Choice2 = _interopRequireDefault(_Choice);

var _IngredientsEditor = require('./sections/IngredientsEditor');

var _IngredientsEditor2 = _interopRequireDefault(_IngredientsEditor);

var _preview = require('./sections/preview');

var _preview2 = _interopRequireDefault(_preview);

var _state = require('./state');

var _state2 = _interopRequireDefault(_state);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

		this.onSourceChange = (0, _mobx.action)(function (content) {
			_this.props.stateManager.content = content;
		});
		this.onChangeDestination = (0, _mobx.action)(function (newDestinationID) {
			_this.props.stateManager.destinationID = newDestinationID;
		});
		this.onPhoneDestination = (0, _mobx.action)(function () {
			_this.props.stateManager.destinationDevice = 'phone';
		});
		this.onFullDestination = (0, _mobx.action)(function () {
			_this.props.stateManager.destinationDevice = 'full';
		});
	},
	onSetUpMainField: function onSetUpMainField(component) {
		var el = (0, _reactDom.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 _react2.default.createElement(
			_reactSeeds.Seed,
			{ row: true, justifyContent: 'center',
				grow: 0, shrink: 0,
				background: { color: backgroundColor }
			},
			_react2.default.createElement(
				_reactSeeds.Seed,
				{ row: true,
					grow: 1, shrink: 2,
					minWidth: 320,
					overflow: 'scroll',
					onMouseDown: this.onClickDrag,
					onMouseMove: this.onClickDrag,
					onMouseUp: this.onClickDrag
				},
				_react2.default.createElement(
					_reactSeeds.Seed,
					_extends({ column: true,
						grow: 1
					}, stylers.mainColumn),
					_react2.default.createElement(_Field2.default, _extends({
						ref: this.onSetUpMainField,
						value: content,
						onChange: this.onSourceChange
					}, stylers.sourceField))
				),
				_react2.default.createElement(
					_reactSeeds.Seed,
					{ column: true },
					_react2.default.createElement(_IngredientsEditor2.default, {
						ingredients: ingredients,
						ingredientIDToVariationIndex: scenario,
						onAddNew: stateManager.addNewIngredient,
						onRemoveAtIndex: stateManager.onRemoveIngredientAtIndex,
						onAddVariationAtIndex: stateManager.onAddVariationAtIndex
					})
				)
			),
			showTree && _react2.default.createElement(
				_reactSeeds.Seed,
				_extends({ row: true, grow: 1, shrink: 1
				}, stylers.preview),
				_react2.default.createElement(
					'pre',
					null,
					!!contentTree ? JSON.stringify(contentTree, null, 2) : null
				)
			),
			_react2.default.createElement(_preview2.default, {
				contentTree: contentTree,
				ingredients: activeIngredients,
				destinationID: destinationID,
				destinationDevice: destinationDevice,
				destinations: _destinations2.default,
				onChangeDestination: this.onChangeDestination,
				onPhoneDestination: this.onPhoneDestination,
				onFullDestination: this.onFullDestination
			})
		);
	}
}));
module.exports = exports['default'];