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

exports.default = IngredientsEditor;

var _ramda = require('ramda');

var _ramda2 = _interopRequireDefault(_ramda);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactSeeds2 = _interopRequireDefault(_reactSeeds);

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

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 _Tabs = require('../ui/Tabs');

var _Tabs2 = _interopRequireDefault(_Tabs);

var _RecordEditor = require('../record/RecordEditor');

var _RecordEditor2 = _interopRequireDefault(_RecordEditor);

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

var stylers = _interopRequireWildcard(_stylers);

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

var types = [{ value: 'text', title: 'Text' }, { value: 'image', title: 'Image' },
//{ value: 'markdown', title: 'Markdown' },
{ value: 'json', title: 'Record' },
//{ value: 'csv', title: 'CSV' },
//{ value: 'gist', title: 'Gist' },
//{ value: 'icing', title: 'Icing' },
//{ value: 'error', title: 'Error' },
{ value: 'audience', title: 'Audience' }];

var itemWidth = 270;
var gutter = 5;

var ReferenceHeading = function ReferenceHeading(props) {
	return _react2.default.createElement(_reactSeeds.Seed, _extends({ Component: 'h3',
		text: { align: 'center' }
	}, props));
};

var IngredientButton = function IngredientButton(props) {
	return _react2.default.createElement(_Button2.default, _extends({}, props, stylers.ingredientButton(props)));
};

var RemoveButton = function RemoveButton(props) {
	return _react2.default.createElement(_Button2.default, _extends({ children: '\xD7', minWidth: 32, huge: true }, props, { styler: stylers.ingredientButton }));
};

var AddButton = function AddButton(props) {
	return _react2.default.createElement(_Button2.default, _extends({ children: 'Add ingredient\u2026',
		grow: 1,
		basis: itemWidth, minWidth: itemWidth, height: 32
	}, props, {
		styler: stylers.masterButton
	}));
};

var ReferenceActions = function ReferenceActions(_ref) {
	var onAddNew = _ref.onAddNew;
	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ row: true,
			shrink: 0,
			basis: 100,
			margin: { left: gutter, right: gutter * 2 }
		},
		_react2.default.createElement(AddButton, { onClick: onAddNew })
	);
};

var VariationTabs = function VariationTabs(_ref2) {
	var selectedIndex = _ref2.selectedIndex,
	    count = _ref2.count,
	    onSelect = _ref2.onSelect,
	    onAdd = _ref2.onAdd;
	return _react2.default.createElement(_Tabs2.default, {
		items: _ramda2.default.concat(_ramda2.default.times(function (index) {
			return {
				title: index + 1,
				selected: index === selectedIndex,
				onClick: function onClick() {
					return onSelect(index);
				}
			};
		}, count), { title: '+', onClick: onAdd }),
		buttonStyler: stylers.ingredientButton
	});
};

function ValidatingRecordEditor(_ref3) {
	var jsonString = _ref3.jsonString;

	try {
		return _react2.default.createElement(_RecordEditor2.default, { object: JSON.parse(jsonString), grow: 1 });
	} catch (error) {
		return _react2.default.createElement('noscript', null);
	}
}

var Brick = (0, _mobxReact.observer)(function Brick(_ref4) {
	var type = _ref4.type,
	    info = _ref4.info,
	    ingredientIndex = _ref4.ingredientIndex;

	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ row: true },
		_react2.default.createElement(_Button2.default, {
			width: '1.35rem',
			children: info.result.error ? '!' : info.enabled ? '✓' : '·',
			styler: stylers.ingredientButton,
			onClick: function onClick() {
				info.toggleEnabled();
			}
		}),
		type === 'json' ? _react2.default.createElement(ValidatingRecordEditor, { jsonString: info.rawContent }) : _react2.default.createElement(_Field2.default, _extends({ grow: 1,
			value: info.rawContent,
			onChange: function onChange(newRawContent) {
				info.rawContent = newRawContent;
			}
		}, stylers.ingredientContentField({ error: info.result.error }))),
		_react2.default.createElement(_Button2.default, {
			width: '1.35rem',
			children: '\xB7\xB7\xB7',
			styler: stylers.ingredientButton,
			onClick: function onClick() {
				// Show menu with delete, convert to error
			}
		})
	);
});

var Item = (0, _mobxReact.observer)(function Item(_ref5) {
	var ingredientIndex = _ref5.index,
	    ingredient = _ref5.ingredient,
	    ingredientIDToVariationIndex = _ref5.ingredientIDToVariationIndex,
	    onRemoveAtIndex = _ref5.onRemoveAtIndex,
	    onAddVariationAtIndex = _ref5.onAddVariationAtIndex,
	    onAddNew = _ref5.onAddNew;
	var id = ingredient.id,
	    type = ingredient.type,
	    variations = ingredient.variations;

	var selectedVariation = _ramda2.default.defaultTo(0, _ramda2.default.path([id], ingredientIDToVariationIndex));
	return _react2.default.createElement(
		_reactSeeds.Seed,
		{
			column: true,
			basis: itemWidth,
			width: itemWidth,
			margin: { left: gutter, right: gutter }
		},
		_react2.default.createElement(
			_reactSeeds.Seed,
			{ row: true },
			_react2.default.createElement(_Field2.default, _extends({
				value: id,
				grow: 1,
				onChange: function onChange(newID) {
					console.log('newID', newID, ingredient);
					ingredient.id = newID;
				}
			}, stylers.ingredientIDField)),
			_react2.default.createElement(_Choice2.default, {
				styler: stylers.ingredientButton,
				value: type, items: types,
				onChange: function onChange(newType) {
					ingredient.type = newType;
				}
			}),
			_react2.default.createElement(RemoveButton, { onClick: function onClick() {
					onRemoveAtIndex(ingredientIndex);
				} })
		),
		variations.map(function (info, index) {
			return _react2.default.createElement(Brick, {
				type: type,
				info: info,
				ingredientIndex: ingredientIndex
			});
		}),
		_react2.default.createElement(_Button2.default, {
			children: '+',
			onClick: function onClick() {
				ingredient.addNewVariation();
			},
			styler: stylers.ingredientButton
		})
	);
});

function IngredientsEditor(_ref6) {
	var ingredients = _ref6.ingredients,
	    ingredientIDToVariationIndex = _ref6.ingredientIDToVariationIndex,
	    onAddNew = _ref6.onAddNew,
	    onRemoveAtIndex = _ref6.onRemoveAtIndex,
	    onAddVariationAtIndex = _ref6.onAddVariationAtIndex;

	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ row: true },
		ingredients.map(function (ingredient, index) {
			return _react2.default.createElement(Item, _extends({ key: index
			}, {
				index: index,
				ingredient: ingredient,
				ingredientIDToVariationIndex: ingredientIDToVariationIndex,
				onRemoveAtIndex: onRemoveAtIndex,
				onAddVariationAtIndex: onAddVariationAtIndex,
				onAddNew: onAddNew
			}));
		}),
		_react2.default.createElement(ReferenceActions, {
			onAddNew: onAddNew
		})
	);
}
module.exports = exports['default'];