var PreviewButton = require('./PreviewButton.react');
var Code = require('./GeneratorCode.react');
var AppActions = require('../actions/AppActions');
var Preview = require('./GeneratorPreview.react');
var SelectionButton = require('./SelectionButton.react');

var Generator = React.createClass({
	render: function() {
		var data = this.props.data;
		var text = data.text;
		var url = data.url;
		var sizes = data.sizes;
		var networks = data.networks;
		var icons = data.icons;

		var networkSelectionButtons = [];
		var previewButtons = [];
		var sizeSelectionButtons = [];
		var iconSelectionButtons = [];
		var HTMLCodeForCurrentButtons = "";
		var CSSCodeForCurrentButtons = data.generalStyling + "\n\n";
		var selectedSize;
		var selectedIcon = "";

		// Icon size selection
		for (var icon in icons) {
			if (icons[icon] === true) {
				selectedIcon += icon;
			}
			iconSelectionButtons.push(
				<SelectionButton
					key={"select-icon-" + icon}
					element={icon}
					selected={icons[icon]}
					selectOption={this._toggleIcon}
					classNameSuffix={"shape"}
					type="checkbox"
				/>);
		}
		if (selectedIcon === "") {
			selectedIcon = "normal"; // selectedIcon can be one of the following: "normal", "circle", "solid", "solidcircle"
		}
		console.log(selectedIcon);
		var iconOptionAmount = iconSelectionButtons.length;

		// Button size selection
		for (var size in sizes) {
			if (sizes[size] === true) {
				var selectedSize = size;
			}
			sizeSelectionButtons.push(
				<SelectionButton
					key={"select-size-" + size}
					element={size}
					selected={sizes[size]}
					selectOption={this._changeSize}
					classNameSuffix={"size"}
					type="radio"
				/>)
		}
		var sizeOptionAmount = sizeSelectionButtons.length;

		// Social network selection buttons
		for (var network in networks) {
			networkSelectionButtons.push(
				<SelectionButton
					key={network + "-button"}
					element={networks[network].icons[selectedIcon]}
					selected={networks[network].visible}
					selectOption={this._toggleNetwork}
					nameInState={network}
					classNameSuffix={"network"}
					iconSize={selectedIcon}
					type="checkbox"
				/>);
			// If the network is selected, show it in the preview
			if (networks[network].visible === true) {
				previewButtons.push(
					<PreviewButton
						key={network + "-social-button"}
						url={url}
						text={text}
						network={networks[network]}
						id={network}
						size={selectedSize}
						icon={networks[network].icons[selectedIcon]}
						iconSize={selectedIcon}
					/>);
				HTMLCodeForCurrentButtons += "<!-- Sharingbutton " + networks[network].name + " -->\n"
				HTMLCodeForCurrentButtons += React.renderToStaticMarkup(
					<PreviewButton
						key={network + "-social-button"}
						url={url}
						text={text}
						network={networks[network]}
						id={network}
						size={selectedSize}
						icon={networks[network].icons[selectedIcon]}
						iconSize={selectedIcon}
					/>);
				HTMLCodeForCurrentButtons += "\n\n";
				CSSCodeForCurrentButtons += networks[network].style;
				CSSCodeForCurrentButtons += "\n\n";
			}
		}

		// Add proper indentation for HTML Code Preview
		HTMLCodeForCurrentButtons = HTMLCodeForCurrentButtons.replace(/<div class="resp-sharing-button /g, '\n  <div class="resp-sharing-button ');
		HTMLCodeForCurrentButtons = HTMLCodeForCurrentButtons.replace(/<div class="resp-sharing-button__/g, '\n    <div class="resp-sharing-button__');
		HTMLCodeForCurrentButtons = HTMLCodeForCurrentButtons.replace(/<\/div><\/div>/g, "\n    </div>\n  </div>");
		HTMLCodeForCurrentButtons = HTMLCodeForCurrentButtons.replace(/<\/div>Share on/g, "\n    </div>Share on");
		HTMLCodeForCurrentButtons = HTMLCodeForCurrentButtons.replace(/<\/a>/g, "\n</a>");

		// Render the Generator
		return (
			<div className="generator">
				<div className="generator__inner-wrapper">
					<div className="generator__settings">
						<div className="generator__settings-field-wrapper generator__settings-field-wrapper--hover">
							<label className="generator__settings-section-heading" htmlFor="url">URL</label>
							<input className="generator__settings-field generator__settings-url" id="url" onChange={this._setURL} value={url} />
						</div>
						<div className="generator__settings-field-wrapper generator__settings-field-wrapper--hover">
							<label className="generator__settings-section-heading" htmlFor="text">Text</label>
							<input className="generator__settings-field generator__settings-text" id="text" onChange={this._setText} value={text} />
						</div>
						<div className="generator__settings-field-wrapper">
							<h3 className="generator__settings-section-heading">Social Networks</h3>
							<div className="generator__settings-field">
								{ networkSelectionButtons }
							</div>
						</div>
						<div className="generator__settings-field-wrapper">
							<h3 className="generator__settings-section-heading">Size</h3>
							<div className="generator__settings-field">
								{ sizeSelectionButtons }
				        <div className="generator__option-bullet"></div>
							</div>
						</div>
						<div className="generator__settings-field-wrapper">
							<h3 className="generator__settings-section-heading">Icon</h3>
							<div className="generator__settings-field">
								{ iconSelectionButtons }
							</div>
						</div>
					</div>
					<Preview previewButtons={previewButtons} />
				</div>
				<Code networks={networks} HTMLForButtons={HTMLCodeForCurrentButtons} CSSForButtons={CSSCodeForCurrentButtons} />
			</div>
		);
	},
	// Dispatches event to change the shared URL
	_setURL: function(evt) {
		AppActions.setURL(evt.target.value);
	},
	// Dispatches event to change the shared text
	_setText: function(evt) {
		AppActions.setText(evt.target.value);
	},
	// Dispatches event to change the button size
	_changeSize: function(name) {
		AppActions.changeSize(name);
	},
	// Dispatches event to change icon type
	_toggleIcon: function(name) {
		AppActions.toggleIcon(name);
	},
	// Dispatches event to change network selection
	_toggleNetwork: function(name) {
		AppActions.toggleNetwork(name);
	}
});

module.exports = Generator;

@@ -1250,37 +1250,8 @@
 %09%09%7D%0A
-%09%09console.log(selectedIcon);%0A
 %09%09va

Remove unnecessary console.log