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 Frame from 'react-frame-component';

import Button from '../../ui/Button';
import Choice from '../../ui/Choice';
import * as stylers from '../../stylers';

var catchRenderErrors = false;

var iframeStyler = seeds({
	//grow: 1,
	height: 600,
	border: 'none'
});

function DestinationChoice(_ref) {
	var destinationID = _ref.destinationID,
	    destinationDevice = _ref.destinationDevice,
	    destinations = _ref.destinations,
	    onChange = _ref.onChange,
	    onPhoneDestination = _ref.onPhoneDestination,
	    onFullDestination = _ref.onFullDestination;

	var items = R.pipe(R.toPairs, R.map(R.converge(R.merge, [R.pipe(R.prop(0), R.objOf('value')), R.pipe(R.prop(1), R.pick(['title']))])))(destinations);

	return React.createElement(
		Seed,
		{ row: true, width: '100%' },
		React.createElement(Choice, {
			value: destinationID,
			items: items,
			width: '100%',
			minHeight: 32,
			grow: 1,
			border: 'none'
			//maxWidth='20em'
			, onChange: onChange,
			styler: stylers.masterButton
		}),
		React.createElement(Button, {
			onClick: onPhoneDestination,
			children: 'Phone',
			selected: destinationDevice == 'phone',
			styler: stylers.masterButton
		}),
		React.createElement(Button, {
			onClick: onFullDestination,
			children: 'Full',
			selected: destinationDevice == 'full',
			styler: stylers.masterButton
		})
	);
}

export default function PreviewSection(_ref2) {
	var contentTree = _ref2.contentTree,
	    ingredients = _ref2.ingredients,
	    destinationID = _ref2.destinationID,
	    destinationDevice = _ref2.destinationDevice,
	    destinations = _ref2.destinations,
	    onChangeDestination = _ref2.onChangeDestination,
	    onPhoneDestination = _ref2.onPhoneDestination,
	    onFullDestination = _ref2.onFullDestination;
	var _destinations$destina = destinations[destinationID],
	    renderHead = _destinations$destina.head,
	    Preview = _destinations$destina.Preview;


	return React.createElement(
		Seed,
		_extends({ column: true, alignItems: 'center'
		}, stylers.previewColumn({ destinationDevice: destinationDevice })),
		React.createElement(
			Seed,
			{ key: destinationID,
				column: true,
				grow: 1, width: '100%'
			},
			!!contentTree ? false ? R.tryCatch(function (contentTree) {
				return React.createElement(Preview, {
					ingredients: ingredients,
					contentTree: contentTree
				});
			}, function (error, contentTree) {
				return console.error('Invalid tree', error, contentTree);
			})(contentTree) : React.createElement(
				Frame,
				_extends({
					head: renderHead()
				}, iframeStyler),
				React.createElement(Preview, {
					ingredients: ingredients,
					contentTree: contentTree
				})
			) : null
		),
		React.createElement(DestinationChoice, {
			destinationID: destinationID,
			destinationDevice: destinationDevice,
			destinations: destinations,
			onChange: onChangeDestination,
			onPhoneDestination: onPhoneDestination,
			onFullDestination: onFullDestination
		})
	);
}