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 seeds, { Seed } from 'react-seeds';
import { observer } from 'mobx-react';

import Button from '../ui/Button';
import Field from '../ui/Field';
import Choice from '../ui/Choice';
import Tabs from '../ui/Tabs';
import RecordEditor from '../record/RecordEditor';
import * as stylers from '../stylers';

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 React.createElement(Seed, _extends({ Component: 'h3',
		text: { align: 'center' }
	}, props));
};

var IngredientButton = function IngredientButton(props) {
	return React.createElement(Button, _extends({}, props, stylers.ingredientButton(props)));
};

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

var AddButton = function AddButton(props) {
	return React.createElement(Button, _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 React.createElement(
		Seed,
		{ row: true,
			shrink: 0,
			basis: 100,
			margin: { left: gutter, right: gutter * 2 }
		},
		React.createElement(AddButton, { onClick: onAddNew })
	);
};

var VariationTabs = function VariationTabs(_ref2) {
	var selectedIndex = _ref2.selectedIndex,
	    count = _ref2.count,
	    onSelect = _ref2.onSelect,
	    onAdd = _ref2.onAdd;
	return React.createElement(Tabs, {
		items: R.concat(R.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 React.createElement(RecordEditor, { object: JSON.parse(jsonString), grow: 1 });
	} catch (error) {
		return React.createElement('noscript', null);
	}
}

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

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

var Item = 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 = R.defaultTo(0, R.path([id], ingredientIDToVariationIndex));
	return React.createElement(
		Seed,
		{
			column: true,
			basis: itemWidth,
			width: itemWidth,
			margin: { left: gutter, right: gutter }
		},
		React.createElement(
			Seed,
			{ row: true },
			React.createElement(Field, _extends({
				value: id,
				grow: 1,
				onChange: function onChange(newID) {
					console.log('newID', newID, ingredient);
					ingredient.id = newID;
				}
			}, stylers.ingredientIDField)),
			React.createElement(Choice, {
				styler: stylers.ingredientButton,
				value: type, items: types,
				onChange: function onChange(newType) {
					ingredient.type = newType;
				}
			}),
			React.createElement(RemoveButton, { onClick: function onClick() {
					onRemoveAtIndex(ingredientIndex);
				} })
		),
		variations.map(function (info, index) {
			return React.createElement(Brick, {
				type: type,
				info: info,
				ingredientIndex: ingredientIndex
			});
		}),
		React.createElement(Button, {
			children: '+',
			onClick: function onClick() {
				ingredient.addNewVariation();
			},
			styler: stylers.ingredientButton
		})
	);
});

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

	return React.createElement(
		Seed,
		{ row: true },
		ingredients.map(function (ingredient, index) {
			return React.createElement(Item, _extends({ key: index
			}, {
				index: index,
				ingredient: ingredient,
				ingredientIDToVariationIndex: ingredientIDToVariationIndex,
				onRemoveAtIndex: onRemoveAtIndex,
				onAddVariationAtIndex: onAddVariationAtIndex,
				onAddNew: onAddNew
			}));
		}),
		React.createElement(ReferenceActions, {
			onAddNew: onAddNew
		})
	);
}