import R from 'ramda';
import seeds from 'react-seeds';
import rgba from 'react-sow/rgba';

import * as colors from '../colors';

export var mainColumn = seeds({
	//basis: '49%',
	grow: 0,
	shrink: 0,
	width: 320,
	margin: { left: '0.5%', right: '0.5%' }
	//padding: { top: '1rem' }
});

export var previewColumn = function previewColumn(_ref) {
	var destinationDevice = _ref.destinationDevice;
	return {
		zIndex: 1,
		grow: 1,
		shrink: 0,
		basis: 'calc(100vw - 320px)',
		minWidth: 320,
		maxWidth: destinationDevice === 'phone' && 414,
		margin: { right: 5 },
		boxShadow: '0 0 10px ' + rgba.whiteValue(0, 0.333)
	};
};

export var sourceField = {
	column: true,
	width: '100%',
	padding: '1rem',
	font: { size: 16 },
	text: { color: colors.source.text },
	background: { color: colors.source.background },
	border: { width: 1, style: 'solid', color: colors.source.border }
};

export var recordField = {
	width: '100%',
	padding: '0.5rem',
	font: { size: 16 },
	//text: { color: colors.light },
	background: { color: colors.lightKeyB },
	border: 'none'
};

export var markdownField = {
	column: true,
	width: '100%',
	padding: '1rem',
	font: { size: 16 },
	//text: { color: colors.light },
	background: { color: colors.lightKeyB },
	border: { width: 1, style: 'solid', color: colors.light1mid }
};

export var ingredientContentField = function ingredientContentField(_ref2) {
	var error = _ref2.error;
	return {
		padding: '0.5rem',
		font: { size: 16 },
		text: { align: 'left', color: colors.ingredient.field.text },
		background: { color: error != null ? colors.errorFieldBackground : colors.ingredient.field.background },
		border: { width: 1, style: 'solid', color: colors.ingredient.field.border }
	};
};

export var ingredientIDField = R.evolve({
	font: R.merge({ weight: 'bold' })
}, ingredientContentField({}));

export var ingredientButton = function ingredientButton(_ref3) {
	var selected = _ref3.selected;

	var buttonColors = colors.ingredient.button[selected ? 'selected' : 'normal'];
	return {
		text: { color: buttonColors.text },
		background: { color: buttonColors.background },
		border: { width: 1, style: 'solid', color: buttonColors.border }
	};
};

export var masterButton = function masterButton(_ref4) {
	var selected = _ref4.selected;
	return {
		padding: { left: '0.5em', right: '0.5em' },
		text: { color: selected ? colors.lightKeyB : colors.light },
		background: { color: colors.dark }
	};
};