import R from 'ramda';
import React from 'react';
import seeds, { Seed } from 'react-seeds';

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

var backgroundColor = '#191919';

var Code = function Code(_ref) {
	var children = _ref.children,
	    _ref$indent = _ref.indent,
	    indent = _ref$indent === undefined ? 0 : _ref$indent;
	return React.createElement(
		Seed,
		{ Component: 'pre',
			grow: 1, width: '100%',
			text: { align: 'left', whitespace: 'pre-wrap', color: 'white' },
			background: { color: backgroundColor }
		},
		R.repeat('  ', indent),
		children
	);
};

var field = function field(tags, references, text) {
	return React.createElement(
		Code,
		null,
		'    <label\n      <span>' + text + '</span>\n      <input type=\'' + (Vanilla.isPassword(tags, text) ? 'password' : 'text') + '\' />\n    </label>\n'
	);
};

var button = function button(tag, mentions, text) {
	return React.createElement(Code, { children: '<button>' + text + '</button>', indent: 2 });
};

var image = function image(tag, mentions, text) {
	return React.createElement(
		Code,
		null,
		'    <figure>\n      <img src="...">\n      <figcaption>' + text + '</figcaption>\n    </figure>\n'
	);
};

var text = function text(tag, mentions, _text, children) {
	return React.createElement(
		Code,
		{ children: '<span>' + (mentions[0] || _text) + '</span>', indent: 2 },
		'<span>',
		R.ifElse(R.isNil, R.always(_text), function (mentionName) {
			return '{ ' + mentionName + ' }';
		})(mentions[0]),
		'</span>'
	);
};

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

function Section(_ref2) {
	var children = _ref2.children;

	return React.createElement(Seed, { children: children });
}

function Master(_ref3) {
	var children = _ref3.children,
	    ingredients = _ref3.ingredients;

	var ingredientIDs = R.pipe(R.keys, R.join(', '))(ingredients);

	return React.createElement(
		Seed,
		{
			background: { color: backgroundColor }
		},
		React.createElement(Code, { children: 'function Component({ ' + ingredientIDs + ' }) {' }),
		React.createElement(Code, { children: 'return (', indent: 1 }),
		children,
		React.createElement(Code, { children: ')', indent: 1 }),
		React.createElement(Code, { children: '}' })
	);
}

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

export var title = 'React Code';

export function head() {
	return [];
}