var React = require('react');
var Field = require('../Field');
var Note = require('../../components/Note');
var DateInput = require('../../components/DateInput');
var moment = require('moment');

var FormField = require('elemental').FormField;
var FormInput = require('elemental').FormInput;

module.exports = Field.create({
	
	displayName: 'DatetimeField',

	focusTargetRef: 'dateInput',

	// default input formats
	dateInputFormat: 'YYYY-MM-DD',
	timeInputFormat: 'h:mm:ss a',

	// parse formats (duplicated from lib/fieldTypes/datetime.js)
	parseFormats: ['YYYY-MM-DD', 'YYYY-MM-DD h:m:s a', 'YYYY-MM-DD h:m a', 'YYYY-MM-DD H:m:s', 'YYYY-MM-DD H:m'],

	getInitialState: function() {
		return { 
			dateValue: this.props.value ? moment(this.props.value).format(this.dateInputFormat) : '',
			timeValue: this.props.value ? moment(this.props.value).format(this.timeInputFormat) : ''
		};
	},

	getDefaultProps: function() {
		return { 
			formatString: 'Do MMM YYYY, h:mm:ss a'
		};
	},

	// TODO: Move isValid() so we can share with server-side code
	isValid: function(value) {
		return moment(value, this.parseFormats).isValid();
	},

	// TODO: Move format() so we can share with server-side code
	format: function(value, format) {
		format = format || this.dateInputFormat + ' ' + this.timeInputFormat;
		return value ? moment(value).format(format) : '';
	},

	handleChange: function(dateValue, timeValue) {
		var value = dateValue + ' ' + timeValue,
			datetimeFormat = this.dateInputFormat + ' ' + this.timeInputFormat;

		this.props.onChange({
			path: this.props.path,
			value: this.isValid(value) ? moment(value, datetimeFormat).toISOString() : null
		});
	},

	dateChanged: function(value) {
		this.setState({ dateValue: value });
		this.handleChange(value, this.state.timeValue);
	},

	timeChanged: function(event) {
		this.setState({ timeValue: event.target.value });
		this.handleChange(this.state.dateValue, event.target.value);
	},

	setNow: function() {
		var dateValue = moment().format(this.dateInputFormat),
			timeValue = moment().format(this.timeInputFormat);

		this.setState({
			dateValue: dateValue,
			timeValue: timeValue
		});
		this.handleChange(dateValue, timeValue);
	},

	renderUI: function() {
		
		var input;
		
		if (this.shouldRenderField()) {
			input = (
				<div>
					<DateInput ref="dateInput" name={this.props.paths.date} value={this.state.dateValue} format={this.dateInputFormat} onChange={this.dateChanged} />
					<input type="text" name={this.props.paths.time} value={this.state.timeValue} placeholder="HH:MM:SS am/pm" onChange={this.timeChanged} autoComplete="off" className="form-control time" />
					<button type="button" className="btn btn-default btn-set-now" onClick={this.setNow}>Now</button>
				</div>
			);
		} else {
			input = <FormInput noedit>{this.format(this.props.value, this.props.formatString)}</FormInput>;
		}
		
		return (
			<FormField label={this.props.label} className="field-type-datetime">
				{input}
				<div className="col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2 field-note-wrapper">
					<Note note={this.props.note} />
				</div>
			</FormField>
		);
	}

});

@@ -189,16 +189,58 @@
 ent');%0A%0A
+var Button = require('elemental').Button;%0A
 var Form
@@ -326,16 +326,110 @@
 rmInput;
+%0Avar FormRow = require('elemental').FormRow;%0Avar InputGroup = require('elemental').InputGroup;
 %0A%0Amodule
@@ -2427,21 +2427,60 @@
  (%0A%09%09%09%09%3C
-div
+FormRow%3E%0A%09%09%09%09%09%3CFormField width=%22one-half%22
 %3E%0A
+%09
 %09%09%09%09%09%3CDa
@@ -2632,25 +2632,90 @@
 %09%09%09%3C
-input type=%22text%22
+/FormField%3E%0A%09%09%09%09%09%3CFormField width=%22one-half%22%3E%0A%09%09%09%09%09%09%3CInputGroup%3E%0A%09%09%09%09%09%09%09%3CFormInput
  nam
@@ -2848,153 +2848,133 @@
 off%22
- className=%22form-control time%22
  /%3E%0A
+%09%09
 %09%09%09%09%09%3C
-button type=%22button%22 className=%22btn btn-default btn-set-now%22 onClick=%7Bthis.setNow%7D%3ENow%3C/button%3E%0A%09%09%09%09%3C/div
+InputGroup.Addon onClick=%7Bthis.setNow%7D%3ENow%3C/InputGroup.Addon%3E%0A%09%09%09%09%09%09%3C/InputGroup%3E%0A%09%09%09%09%09%3C/FormField%3E%0A%09%09%09%09%3C/FormRow
 %3E%0A%09%09

update DateTimeField to use elemental components