import React, { PropTypes } from 'react';
import { css, StyleSheet } from 'aphrodite/no-important';
import Button from '../Button';
import Glyph from '../Glyph';

function GlyphButton ({ children, glyph, glyphColor, glyphSize, position, ...props }) {
	const isDefault = position === 'default';
	const isLeft = position === 'left';
	const isRight = position === 'right';

	// determine if margin is necessary
	const glyphStyles = {};
	if (isLeft) glyphStyles.marginRight = '0.5em';
	if (isRight) glyphStyles.marginLeft = '0.5em';

	// prepare the icon
	const icon = (
		<Glyph
			className={css(classes.glyph)}
			color={glyphColor}
			name={glyph}
			size={glyphSize}
			style={glyphStyles}
		/>
	);

	// render that shit
	return (
		<Button {...props}>
			{(isDefault || isLeft) && icon}
			{children}
			{isRight && icon}
		</Button>
	);
};

// For props "glyph", "glyphColor", and "glyphSize":
// prop type validation will occur within the Glyph component, no need to
// duplicate, just pass it through.
GlyphButton.propTypes = {
	glyph: PropTypes.string,
	glyphColor: PropTypes.string,
	glyphSize: PropTypes.string,
	position: PropTypes.oneOf(['default', 'left', 'right']),
};
GlyphButton.defaultProps = {
	position: 'default', // no margin, assumes no children
};

const classes = StyleSheet.create({
	glyph: {
		display: 'inline-block',
		marginTop: '-0.1em', // fix icon alignment
		verticalAlign: 'middle',
	},
});

module.exports = GlyphButton;

@@ -1,12 +1,62 @@
+/* eslint quote-props: %5B%22error%22, %22as-needed%22%5D */%0A%0A
 import React
@@ -418,167 +418,8 @@
 ';%0A%0A
-%09// determine if margin is necessary%0A%09const glyphStyles = %7B%7D;%0A%09if (isLeft) glyphStyles.marginRight = '0.5em';%0A%09if (isRight) glyphStyles.marginLeft = '0.5em';%0A%0A
 %09// 
@@ -556,31 +556,8 @@
 ze%7D%0A
-%09%09%09style=%7BglyphStyles%7D%0A
 %09%09/%3E
@@ -1222,16 +1222,18 @@
 p: '-0.1
+25
 em', // 
@@ -1277,16 +1277,193 @@
 middle',
+%0A%0A%09%09// add spacing%0A%09%09':first-child': %7B%0A%09%09%09marginRight: '0.5em',%0A%09%09%7D,%0A%09%09':last-child': %7B%0A%09%09%09marginLeft: '0.5em',%0A%09%09%7D,%0A%09%09':only-child': %7B%0A%09%09%09marginLeft: 0,%0A%09%09%09marginRight: 0,%0A%09%09%7D,
 %0A%09%7D,%0A%7D);

simplify alignment with pseudo classes