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 * as Piping from 'royal-piping/lib/kits/ios';

import * as Vanilla from './Vanilla';
import * as Message from './Message';
import { renderTreeUsing } from './render';

var tone1 = rgba.whiteValue(200, 1.0);
var tone2 = rgba.whiteValue(140, 1.0);

var button = function button(tags, mentions, texts) {
	return React.createElement(Seed, { children: texts,
		alignSelf: 'center',
		padding: { top: 6, bottom: 6, left: 8, right: 8 },
		margin: { bottom: '0.5em' },
		text: { align: 'center' },
		font: { size: R.has('large', tags) ? 20 : R.has('small', tags) ? 12 : 16 },
		background: { color: tone1 },
		cornerRadius: 2
	});
};

var field = function field(tags, mentions, texts, children, Element, resolveContent) {
	return React.createElement(
		Seed,
		{ column: true,
			grow: 1, alignSelf: 'center', minWidth: '12em',
			margin: { bottom: '1em' }
		},
		React.createElement(Seed, { children: texts }),
		React.createElement(Seed, {
			grow: 1,
			minHeight: '1.4em',
			padding: '0.25em',
			border: { width: 1, style: 'solid', color: tone2 },
			children: resolveContent(tags.value)
		})
	);
};

var textStyler = function textStyler(_ref) {
	var link = _ref.link,
	    _ref$small = _ref.small,
	    small = _ref$small === undefined ? false : _ref$small;
	return seeds({
		text: { decoration: R.isNil(link) ? 'none' : 'underline' },
		font: { size: small ? 12 : null }
	});
};

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

	return React.createElement(Seed, _extends({ Component: Component,
		maxWidth: '30rem',
		alignSelf: 'center',
		text: { align: textAlign },
		font: { size: fontSize },
		children: resolveContent({ mentions: mentions, texts: texts })
	}, textStyler(tags)));
};

var elementRendererForTags = Message.useWithFallback(R.cond([[R.has('button'), R.curry(button)],
// [ R.has('cta'), R.curry(Vanilla.cta) ],
[R.has('choice'), R.curry(button)], [R.has('field'), R.curry(field)], [R.has('image'), R.curry(Vanilla.placeholderImage)], [R.has('video'), R.curry(Vanilla.video)], [R.has('text'), R.curry(text)],
// [ R.has('swatch'), R.curry(Vanilla.swatch) ],
// [ R.has('nav'), R.curry(Vanilla.nav) ],
// [ R.has('columns'), R.curry(Vanilla.columns) ],
// [ R.has('list'), R.curry(Vanilla.list) ],
[R.T, R.curry(text)]]));

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

export var title = 'Piping Wireframes';

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\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n' })];
}