import React from 'react/addons';

import Board       from '../../models/board';
import BoardAction from '../../actions/board';

import Dialog           from '../../components/dialog';
import BackgroundSelect from '../../components/background-select';

/**
 *
 */
export default React.createClass({
	mixins: [ React.addons.PureRenderMixin, React.addons.LinkedStateMixin ],

	propTypes: {
		board: (props) => {
			if(!props.board instanceof Board) throw new Error();
		},
		onDismiss: React.PropTypes.func.isRequired
	},

	getInitialState() {
		return {
			name:             this.props.board.name,
			background:       this.props.board.background,
			customBackground: this.props.board.customBackground,
			width:            this.props.board.size.width,
			height:           this.props.board.size.height
		}
	},

	validateNumberOnly() {
		console.log("Hello");
	},

	submit(event) {
		event.preventDefault();

		let size = {
			"width": this.state.width,
			"height": this.state.height
		};

		if(size.width < 1 || size.height < 1 ) {
			size.width = this.props.board.size.width;
			size.height = this.props.board.size.height;
		}

		BoardAction.update({
			id:               this.props.board.id,
			name:             this.state.name,
			background:       this.state.background,
			customBackground: this.state.customBackground,
			size:             size
		});
		return this.props.onDismiss();
	},

	render() {
		return (
			<Dialog className="dialog-edit-board"
					onDismiss={this.props.onDismiss}>
				<section className="dialog-header">
					Edit Board
				</section>
				<section className="dialog-content">

					<label htmlFor="board-name">Board Name</label>
					<input name="board-name" placeholder="Board Name"
						valueLink={this.linkState('name')} autoFocus={true} />

					<BackgroundSelect background={this.linkState('background')}
						customBackground={this.linkState('customBackground')} />


					<section className="dialog-size-wrapper">
						<section className="dialog-size">
								<label htmlFor="board-width">Board Width</label>
								<input name="board-width" placeholder="Board Width"
									   valueLink={this.linkState('width')}
									   type="number" min="1" />
						</section>

						<section className="times-wrapper">
							<i className="fa fa-times"></i>
						</section>

						<section className="dialog-size">
							<label htmlFor="board-height">Board Length</label>
								<input name="board-height" placeholder="Board Length"
									   valueLink={this.linkState('height')}
									   type="number" min="1"/>
						</section>
				    </section>

				</section>
				<section className="dialog-footer">
					<button className="btn-primary" onClick={this.submit}>
						Done
					</button>
				</section>
			</Dialog>
		);
	}
});

@@ -809,61 +809,8 @@
 %7D,%0A%0A
-%09validateNumberOnly() %7B%0A%09%09console.log(%22Hello%22);%0A%09%7D,%0A%0A
 %09sub
@@ -931,20 +931,75 @@
 t%0A%09%09%7D;%0A%0A
+%0A
 %09%09if
+ (!isNaN(size.width) && !isNaN(size.height)) %7B%0A%0A%09%09%09if 
 (size.wi
@@ -1028,13 +1028,13 @@
  %3C 1
- 
 ) %7B%0A
+%09
 %09%09%09s
@@ -1073,24 +1073,25 @@
 e.width;%0A%09%09%09
+%09
 size.height 
@@ -1128,11 +1128,13 @@
 ;%0A%09%09
+%09
 %7D%0A%0A
+%09
 %09%09Bo
@@ -1159,25 +1159,12 @@
 %0A%09%09%09
+%09
 id:
-              
  thi
@@ -1184,33 +1184,22 @@
 .id,%0A%09%09%09
+%09
 name:
-            
  this.st
@@ -1203,32 +1203,33 @@
 .state.name,%0A%09%09%09
+%09
 background:     
@@ -1219,30 +1219,24 @@
 %09background:
-      
  this.state.
@@ -1239,32 +1239,33 @@
 ate.background,%0A
+%09
 %09%09%09customBackgro
@@ -1305,33 +1305,22 @@
 %0A%09%09%09
+%09
 size:
-            
  size%0A%09%09
 %7D);%0A
@@ -1315,20 +1315,25 @@
  size%0A%09%09
+%09
 %7D);%0A
+%09%09%7D%0A
 %09%09return
@@ -2058,44 +2058,110 @@
 dth%22
- placeholder=%22Board Width%22%0A%09%09%09%09%09%09%09%09%09
+%0A                                       placeholder=%22Board Width%22%0A                                    
    v
@@ -2191,33 +2191,60 @@
 e('width')%7D%0A
-%09%09%09%09%09%09%09%09%09
+                                    
    type=%22num
@@ -2512,45 +2512,111 @@
 ght%22
- placeholder=%22Board Length%22%0A%09%09%09%09%09%09%09%09%09
+%0A                                       placeholder=%22Board Length%22%0A                                    
    v
@@ -2655,17 +2655,44 @@
 ')%7D%0A
-%09%09%09%09%09%09%09%09%09
+                                    
    t
@@ -2731,20 +2731,28 @@
 ection%3E%0A
-%09%09%09%09
+            
     %3C/se

Clean up code according to lint rules, numeric validation to size