'use strict';

exports.__esModule = true;
exports.title = exports.Preview = 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.head = head;

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 _ios = require('royal-piping/lib/kits/ios');

var Piping = _interopRequireWildcard(_ios);

var _Vanilla = require('./Vanilla');

var Vanilla = _interopRequireWildcard(_Vanilla);

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

var Message = _interopRequireWildcard(_Message);

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

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 tone1 = _rgba2.default.whiteValue(200, 1.0);
var tone2 = _rgba2.default.whiteValue(140, 1.0);

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

var field = function field(tags, mentions, texts, children, Element, resolveContent) {
	return _react2.default.createElement(
		_reactSeeds.Seed,
		{ column: true,
			grow: 1, alignSelf: 'center', minWidth: '12em',
			margin: { bottom: '1em' }
		},
		_react2.default.createElement(_reactSeeds.Seed, { children: texts }),
		_react2.default.createElement(_reactSeeds.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 (0, _reactSeeds2.default)({
		text: { decoration: _ramda2.default.isNil(link) ? 'none' : 'underline' },
		font: { size: small ? 12 : null }
	});
};

var text = function text(tags, mentions, texts, children, Element, resolveContent) {
	var _ref2 = _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', 'center'] : ['p', '1em', 'left'],
	    Component = _ref2[0],
	    fontSize = _ref2[1],
	    textAlign = _ref2[2];

	return _react2.default.createElement(_reactSeeds.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(_ramda2.default.cond([[_ramda2.default.has('button'), _ramda2.default.curry(button)],
// [ R.has('cta'), R.curry(Vanilla.cta) ],
[_ramda2.default.has('choice'), _ramda2.default.curry(button)], [_ramda2.default.has('field'), _ramda2.default.curry(field)], [_ramda2.default.has('image'), _ramda2.default.curry(Vanilla.placeholderImage)], [_ramda2.default.has('video'), _ramda2.default.curry(Vanilla.video)], [_ramda2.default.has('text'), _ramda2.default.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) ],
[_ramda2.default.T, _ramda2.default.curry(text)]]));

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

var title = exports.title = 'Piping Wireframes';

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