'use strict';

exports.__esModule = true;
exports.title = exports.Preview = exports.extendTagConds = exports.record = exports.nav = exports.columns = exports.list = exports.hidden = exports.code = exports.video = exports.placeholderImage = exports.image = exports.imageMaker = exports.text = exports.choice = exports.makeChoice = exports.cta = exports.button = exports.field = exports.makeField = exports.isPassword = undefined;

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.init = init;
exports.head = head;
exports.deinit = deinit;

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 _rgba = require('react-sow/rgba');

var _rgba2 = _interopRequireDefault(_rgba);

var _repeat = require('lodash/repeat');

var _repeat2 = _interopRequireDefault(_repeat);

var _render = require('./render');

var _multilinedText = require('./multilinedText');

var _multilinedText2 = _interopRequireDefault(_multilinedText);

var _divider = require('./divider');

var _divider2 = _interopRequireDefault(_divider);

var _JSONComponent = require('./JSONComponent');

var _JSONComponent2 = _interopRequireDefault(_JSONComponent);

var _CollectedImage = require('./components/CollectedImage');

var _CollectedImage2 = _interopRequireDefault(_CollectedImage);

var _UnsplashImage = require('./components/UnsplashImage');

var _UnsplashImage2 = _interopRequireDefault(_UnsplashImage);

var _Message = require('./Message');

var Message = _interopRequireWildcard(_Message);

var _Swatch = require('./Swatch');

var Swatch = _interopRequireWildcard(_Swatch);

var _Distribution = require('./Distribution');

var Distribution = _interopRequireWildcard(_Distribution);

var _LayoutCalculator = require('./LayoutCalculator');

var LayoutCalculator = _interopRequireWildcard(_LayoutCalculator);

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 whenPresent = _ramda2.default.unless(_ramda2.default.isNil);

var isPassword = exports.isPassword = function isPassword(tags, texts) {
	return _ramda2.default.has('password', tags) || _ramda2.default.any(_ramda2.default.test(/\bpassword\b/i), texts);
};

var Label = function Label(_ref) {
	var label = _ref.label,
	    wrapperClassName = _ref.wrapperClassName,
	    _ref$wrapInDiv = _ref.wrapInDiv,
	    wrapInDiv = _ref$wrapInDiv === undefined ? true : _ref$wrapInDiv,
	    children = _ref.children;
	return wrapInDiv ? _react2.default.createElement(
		'div',
		{
			className: wrapperClassName
		},
		_react2.default.createElement('label', { key: 'label', children: label, style: { display: 'block' } }),
		children
	) : _react2.default.createElement(
		'label',
		_extends({}, (0, _reactSeeds2.default)({ column: true, alignSelf: 'center' }), {
			className: wrapperClassName
		}),
		_react2.default.createElement('span', { key: 'label', children: label, style: { display: 'block' } }),
		children
	);
};

var makeField = exports.makeField = function makeField(_ref2) {
	var _ref2$wrapInDiv = _ref2.wrapInDiv,
	    wrapInDiv = _ref2$wrapInDiv === undefined ? true : _ref2$wrapInDiv,
	    wrapperClassName = _ref2.wrapperClassName,
	    inputClassName = _ref2.inputClassName;
	return function (tags, mentions, texts, children, Element, resolveContent) {
		var value = void 0;
		var onChange = void 0;
		if (_ramda2.default.has('value', tags)) {
			value = resolveContent(tags.value);
			/*value = R.unless(
   	R.is(String),
   	R.always(null),
   	resolveContent(tags.value)
   )*/
			onChange = function onChange(event) {
				var newValue = event.target.value;
				resolveContent(tags.value, { alter: _ramda2.default.always(newValue) });
			};
		}

		return _react2.default.createElement(
			Label,
			{
				label: texts,
				wrapInDiv: wrapInDiv,
				wrapperClassName: wrapperClassName
			},
			_react2.default.createElement('input', { key: 'input',
				type: isPassword(tags, texts) ? 'password' : 'text',
				value: value,
				className: inputClassName,
				onChange: onChange
			})
		);
	};
};

var field = exports.field = makeField({});

var button = exports.button = function button(tags, mentions, texts) {
	return _react2.default.createElement(_reactSeeds.Seed, { Component: 'button',
		shrink: 0, alignSelf: 'center',
		margin: { base: 'auto', bottom: '0.5rem' }
		//maxWidth='20em'
		, children: texts
	});
};
var cta = exports.cta = button;

function ChoiceSelect(_ref3) {
	var value = _ref3.value,
	    texts = _ref3.texts,
	    items = _ref3.items,
	    _ref3$disabled = _ref3.disabled,
	    disabled = _ref3$disabled === undefined ? false : _ref3$disabled,
	    wrapInDiv = _ref3.wrapInDiv,
	    wrapperClassName = _ref3.wrapperClassName;

	return _react2.default.createElement(
		Label,
		{
			label: texts,
			wrapInDiv: wrapInDiv,
			wrapperClassName: wrapperClassName
		},
		_react2.default.createElement(
			'select',
			{
				value: value,
				disabled: disabled,
				style: { fontSize: 16 }
			},
			items.map(function (_ref4) {
				var texts = _ref4.texts,
				    tags = _ref4.tags;
				return _react2.default.createElement('option', { key: texts,
					value: texts[0], children: tags.texts || texts
				});
			})
		)
	);
}

function ChoiceCheckbox(_ref5) {
	var value = _ref5.value,
	    texts = _ref5.texts,
	    _ref5$disabled = _ref5.disabled,
	    disabled = _ref5$disabled === undefined ? false : _ref5$disabled,
	    wrapInDiv = _ref5.wrapInDiv,
	    wrapperClassName = _ref5.wrapperClassName;

	var label = _react2.default.createElement(
		'label',
		(0, _reactSeeds2.default)({ text: { align: 'center' } }),
		_react2.default.createElement('input', { type: 'checkbox', value: value, disabled: disabled }),
		_react2.default.createElement('span', { children: texts })
	);

	return wrapInDiv ? _react2.default.createElement(
		'div',
		{ className: wrapperClassName },
		label
	) : label;
}

var makeChoice = exports.makeChoice = function makeChoice(_ref6) {
	var _ref6$wrapInDiv = _ref6.wrapInDiv,
	    wrapInDiv = _ref6$wrapInDiv === undefined ? true : _ref6$wrapInDiv,
	    wrapperClassName = _ref6.wrapperClassName;
	return function (tags, mentions, texts, children, Element, resolveContent) {
		var hasChildren = children.length > 0;
		if (hasChildren) {
			return _react2.default.createElement(ChoiceSelect, {
				value: tags.value,
				texts: texts,
				items: children,
				disabled: _ramda2.default.has('disabled', tags),
				wrapperClassName: !!wrapperClassName ? wrapperClassName.select : null,
				wrapInDiv: wrapInDiv
			});
		} else {
			return _react2.default.createElement(ChoiceCheckbox, {
				value: tags.value,
				texts: texts,
				disabled: _ramda2.default.has('disabled', tags),
				wrapperClassName: !!wrapperClassName ? wrapperClassName.checkbox : null,
				wrapInDiv: wrapInDiv
			});
		}
	};
};

var choice = exports.choice = makeChoice({});

var wrapForTags = function wrapForTags(tags, resolveContent, element) {
	if (_ramda2.default.has('link', tags)) {
		var url = resolveContent(tags.link);
		console.log('#link', url, tags.link);
		return _react2.default.createElement('a', { href: url, rel: 'nofollow', children: element });
	} else {
		return element;
	}
};

var wrapInInline = _ramda2.default.curry(function (tags, element) {
	if (_ramda2.default.has('small', tags)) {
		element = _react2.default.createElement('small', { children: element });
	}

	return element;
});

var text = exports.text = function text(tags, mentions, texts, children, Element, resolveContent) {
	var _ref7 = _ramda2.default.has('primary', tags) ? ['h1', '2em', 'center'] : _ramda2.default.has('secondary', tags) ? ['h2', '1.5em', 'center'] : _ramda2.default.has('tertiary', tags) ? ['h3', '1.25em', 'left'] : _ramda2.default.has('quote', tags) ? ['blockquote', '1em', 'left'] : ['p', '1em', 'left'],
	    Component = _ref7[0],
	    fontSize = _ref7[1],
	    textAlign = _ref7[2];

	return wrapForTags(tags, resolveContent, _react2.default.createElement(_reactSeeds.Seed, {
		maxWidth: '40rem',
		alignSelf: 'center',
		margin: 'auto',
		text: { align: textAlign },
		font: { size: fontSize },
		children: (0, _multilinedText2.default)(resolveContent({ mentions: mentions, texts: texts }), Component, wrapInInline(tags))
	}));
};

// Images

var imageHeight = 150;
var imageBackground = { color: _rgba2.default.whiteValue(0, 0.1) };

var placeholderImageContent = function placeholderImageContent(tags, texts, resolveContent) {
	return _react2.default.createElement(_reactSeeds.Seed, { column: true, justifyContent: 'center',
		minHeight: imageHeight,
		font: { style: 'italic' },
		background: imageBackground,
		children: texts
	});
};

var richImageContent = function richImageContent(tags, texts, resolveContent) {
	if (_ramda2.default.has('unsplash', tags)) {
		var category = resolveContent(tags['unsplash']);
		category = category.length > 0 ? category[0] : null;
		return _react2.default.createElement(_UnsplashImage2.default, {
			category: category,
			texts: texts
		});
	} else if (_ramda2.default.has('collected', tags)) {
		return _react2.default.createElement(_CollectedImage2.default, {
			sha256: resolveContent(tags['collected']),
			width: whenPresent(resolveContent, tags['width']),
			height: whenPresent(resolveContent, tags['height']),
			texts: texts
		});
	} else {
		return placeholderImageContent(tags, texts, resolveContent);
	}
};

var imageMaker = exports.imageMaker = function imageMaker(imageContent) {
	return function (tags, mentions, texts, children, Element, resolveContent) {
		return _react2.default.createElement(_reactSeeds.Seed, { Component: 'figure', column: true,
			grow: 1, width: '100%',
			margin: 0,
			text: { align: 'center' },
			children: wrapForTags(tags, resolveContent, _ramda2.default.has('nocaption', tags) ? imageContent(tags, texts, resolveContent) : [imageContent(tags, null, resolveContent), _react2.default.createElement(_reactSeeds.Seed, { key: 'caption', Component: 'figcaption',
				text: { lineHeight: '1.3' },
				font: { style: 'italic' },
				children: texts
			})])
		});
	};
};

var image = exports.image = imageMaker(richImageContent);
var placeholderImage = exports.placeholderImage = imageMaker(placeholderImageContent);

var video = exports.video = function video(tags, mentions, texts) {
	return _react2.default.createElement(_reactSeeds.Seed, { Component: 'figure', column: true,
		grow: 1, alignItems: 'center', justifyContent: 'center',
		width: '100%', height: 0,
		padding: { top: 9 / 16 / 2 * 100 + '%', bottom: 9 / 16 / 2 * 100 + '%' },
		background: { color: _rgba2.default.whiteValue(0, 0.1) },
		children: '\u25B6'
	});
};

var code = exports.code = function code(tags, mentions, texts, children, Element, resolveContent) {
	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ Component: 'pre',
			maxWidth: '100%',
			overflow: 'scroll'
		},
		_react2.default.createElement(_reactSeeds.Seed, { Component: 'code',
			children: resolveContent({ mentions: mentions, texts: texts })
		})
	);
};

var isHiddenForTags = _ramda2.default.propSatisfies(Boolean, 'hidden');

var hidden = exports.hidden = function hidden(tags, mentions, texts) {
	return _react2.default.createElement('noscript', null);
};

var list = exports.list = function list(tags, mentions, texts, children, Element, resolveContent) {
	var Component = _ramda2.default.propEq('ordered', true, tags) ? 'ol' : 'ul';
	return _react2.default.createElement(
		_reactSeeds.Seed,
		null,
		text(tags, mentions, texts || [], children, Element, resolveContent),
		_react2.default.createElement(
			_reactSeeds.Seed,
			{ Component: Component

			},
			children.map(function (element, index) {
				return _react2.default.createElement(
					'li',
					{ key: index },
					_react2.default.createElement(Element, element)
				);
			})
		)
	);
};

var columnsComponentForTags = _ramda2.default.cond([[_ramda2.default.has('nav'), _ramda2.default.always('nav')], [_ramda2.default.has('figure'), _ramda2.default.always('figure')], [_ramda2.default.T, _ramda2.default.always('div')]]);

var widthForColumns = _ramda2.default.pipe(function (input) {
	return parseInt(input, 10);
}, _ramda2.default.ifElse(_ramda2.default.gt(_ramda2.default.__, 0), // Greater than 0
function (number) {
	return 100.0 / number + '%';
}, _ramda2.default.always(null)));

var columns = exports.columns = function columns(tags, mentions, texts, children, Element, resolveContent) {
	var columnWidth = widthForColumns(_ramda2.default.when(_ramda2.default.equals(true), _ramda2.default.always(children.length))(resolveContent(tags.columns)));

	var renderColumn = function renderColumn(props) {
		return _react2.default.createElement(
			'div',
			{ style: { flexBasis: columnWidth } },
			Element(props)
		);
	};

	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ Component: columnsComponentForTags(tags),
			row: true, wrap: true, reverse: _ramda2.default.has('reverse', tags), justifyContent: 'center',
			width: '100%'
		},
		// Render content, interleaving an optional divider
		_ramda2.default.pipe(_ramda2.default.converge(_ramda2.default.concat, [_ramda2.default.pipe(_ramda2.default.init, _ramda2.default.map(renderColumn)), _ramda2.default.pipe(_ramda2.default.last, _ramda2.default.ifElse(_ramda2.default.isNil, _ramda2.default.always([]), renderColumn))]))(children)
	);
};

var nav = exports.nav = columns;

var record = exports.record = function record(tags, mentions, texts, children, Element, resolveContent) {
	if (mentions.length > 0) {
		return _react2.default.createElement(_JSONComponent2.default, { isDeserialized: true, json: mentions[0] });
	} else {
		return _react2.default.createElement(_JSONComponent2.default, { isDeserialized: true, json: texts });
	}
};

// import Frame from 'react-frame-component'

// export const gist = (tags, mentions, texts, children, Element, resolveContent) => (
// 	<Frame head={ <script src={ resolveContent({ mentions, texts }) + '.js' } /> } />
// )

var extendTagConds = exports.extendTagConds = function extendTagConds(conds) {
	return _ramda2.default.pipe(Message.useWithFallback, Swatch.useWithFallback, Distribution.useWithFallback, LayoutCalculator.useWithFallback)(_ramda2.default.cond([[isHiddenForTags, _ramda2.default.curry(hidden)]].concat(conds, [[_ramda2.default.has('field'), _ramda2.default.curry(field)], [_ramda2.default.has('button'), _ramda2.default.curry(button)], [_ramda2.default.has('cta'), _ramda2.default.curry(cta)], [_ramda2.default.has('choice'), _ramda2.default.curry(choice)], [_ramda2.default.has('image'), _ramda2.default.curry(image)], [_ramda2.default.has('video'), _ramda2.default.curry(video)], [_ramda2.default.has('code'), _ramda2.default.curry(code)], [_ramda2.default.has('columns'), _ramda2.default.curry(columns)], [_ramda2.default.has('nav'), _ramda2.default.curry(nav)], [_ramda2.default.has('record'), _ramda2.default.curry(record)],
	//[ R.has('gist'), R.curry(gist) ],
	[_ramda2.default.T, _ramda2.default.curry(list)]])));
};

var elementRendererForTags = extendTagConds([]);

var Preview = exports.Preview = (0, _render.renderTreeUsing)({
	elementRendererForTags: elementRendererForTags
});

function init() {}

var title = exports.title = 'Vanilla Web';

function head() {
	return [_react2.default.createElement('style', { children: '\nhtml {\n\theight: 100%;\n\tbackground-color: #fdfdfd;\n}\nhtml, h1, input, button {\n\tfont-family: \'Lato\', sans-serif;\n}\nbody {\n\theight: 100%;\n\tmargin: 0;\n}\n' })];
}

function deinit() {}