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 rgba from 'react-sow/rgba';
import repeatString from 'lodash/repeat';

import { renderTreeUsing } from './render';
import multilinedText from './multilinedText';
import divider from './divider';
import JSONComponent from './JSONComponent';
import CollectedImage from './components/CollectedImage';
import UnsplashImage from './components/UnsplashImage';

var whenPresent = R.unless(R.isNil);

import * as Message from './Message';
import * as Swatch from './Swatch';
import * as Distribution from './Distribution';
import * as LayoutCalculator from './LayoutCalculator';

export var isPassword = function isPassword(tags, texts) {
	return R.has('password', tags) || R.any(R.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 ? React.createElement(
		'div',
		{
			className: wrapperClassName
		},
		React.createElement('label', { key: 'label', children: label, style: { display: 'block' } }),
		children
	) : React.createElement(
		'label',
		_extends({}, seeds({ column: true, alignSelf: 'center' }), {
			className: wrapperClassName
		}),
		React.createElement('span', { key: 'label', children: label, style: { display: 'block' } }),
		children
	);
};

export var 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 (R.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: R.always(newValue) });
			};
		}

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

export var field = makeField({});

export var button = function button(tags, mentions, texts) {
	return React.createElement(Seed, { Component: 'button',
		shrink: 0, alignSelf: 'center',
		margin: { base: 'auto', bottom: '0.5rem' }
		//maxWidth='20em'
		, children: texts
	});
};
export var 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 React.createElement(
		Label,
		{
			label: texts,
			wrapInDiv: wrapInDiv,
			wrapperClassName: wrapperClassName
		},
		React.createElement(
			'select',
			{
				value: value,
				disabled: disabled,
				style: { fontSize: 16 }
			},
			items.map(function (_ref4) {
				var texts = _ref4.texts,
				    tags = _ref4.tags;
				return React.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 = React.createElement(
		'label',
		seeds({ text: { align: 'center' } }),
		React.createElement('input', { type: 'checkbox', value: value, disabled: disabled }),
		React.createElement('span', { children: texts })
	);

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

export var 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 React.createElement(ChoiceSelect, {
				value: tags.value,
				texts: texts,
				items: children,
				disabled: R.has('disabled', tags),
				wrapperClassName: !!wrapperClassName ? wrapperClassName.select : null,
				wrapInDiv: wrapInDiv
			});
		} else {
			return React.createElement(ChoiceCheckbox, {
				value: tags.value,
				texts: texts,
				disabled: R.has('disabled', tags),
				wrapperClassName: !!wrapperClassName ? wrapperClassName.checkbox : null,
				wrapInDiv: wrapInDiv
			});
		}
	};
};

export var choice = makeChoice({});

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

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

	return element;
});

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

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

// Images

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

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

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

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

export var image = imageMaker(richImageContent);
export var placeholderImage = imageMaker(placeholderImageContent);

export var video = function video(tags, mentions, texts) {
	return React.createElement(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: rgba.whiteValue(0, 0.1) },
		children: '\u25B6'
	});
};

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

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

export var hidden = function hidden(tags, mentions, texts) {
	return React.createElement('noscript', null);
};

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

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

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

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

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

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

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

export var nav = columns;

export var record = function record(tags, mentions, texts, children, Element, resolveContent) {
	if (mentions.length > 0) {
		return React.createElement(JSONComponent, { isDeserialized: true, json: mentions[0] });
	} else {
		return React.createElement(JSONComponent, { 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' } /> } />
// )

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

var elementRendererForTags = extendTagConds([]);

export var Preview = renderTreeUsing({
	elementRendererForTags: elementRendererForTags
});

export function init() {}

export var title = 'Vanilla Web';

export function head() {
	return [React.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' })];
}

export function deinit() {}