/**
* @class Ext.ux.form.field.DateTime
* @extends Ext.form.FieldContainer
* @version 0.2 (July 20th, 2011)
* @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
* @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
* @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
* @link http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime
* @ignore
*/
Ext.define('Ext.ux.form.field.DateTime', {
	extend: 'Ext.form.FieldContainer',
	mixins: {
		field: 'Ext.form.field.Field'
	},
	alias: 'widget.xdatetime',

	//configurables

	combineErrors: true,
	msgTarget: 'under',
	layout: 'hbox',
	readOnly: false,

	/**
	* @cfg {String} dateFormat
	* Convenience config for specifying the format of the date portion.
	* This value is overridden if format is specified in the dateConfig.
	* The default is 'Y-m-d'
	*/
	dateFormat: 'Y-m-d',
	/**
	* @cfg {String} timeFormat
	* Convenience config for specifying the format of the time portion.
	* This value is overridden if format is specified in the timeConfig. 
	* The default is 'H:i:s'
	*/
	timeFormat: 'H:i:s',
	//    /**
	//     * @cfg {String} dateTimeFormat
	//     * The format used when submitting the combined value.
	//     * Defaults to 'Y-m-d H:i:s'
	//     */
	//    dateTimeFormat: 'Y-m-d H:i:s',
	/**
	* @cfg {Object} dateConfig
	* Additional config options for the date field.
	*/
	dateConfig: {},
	/**
	* @cfg {Object} timeConfig
	* Additional config options for the time field.
	*/
	timeConfig: {},


	// properties

	dateValue: null, // Holds the actual date
	/**
	* @property dateField
	* @type Ext.form.field.Date
	*/
	dateField: null,
	/**
	* @property timeField
	* @type Ext.form.field.Time
	*/
	timeField: null,

	initComponent: function () {
		var me = this
            , i = 0
            , key
            , tab;

		me.items = me.items || [];

		me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
			format: me.dateFormat,
			flex: 1,
			isFormField: false, //exclude from field query's
			submitValue: false
		}, me.dateConfig));
		me.items.push(me.dateField);

		me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
			format: me.timeFormat,
			flex: 1,
			isFormField: false, //exclude from field query's
			submitValue: false
		}, me.timeConfig));
		me.items.push(me.timeField);

		for (; i < me.items.length; i++) {
			me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
			me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
			me.items[i].on('specialkey', function (field, event) {
				key = event.getKey();
				tab = key == event.TAB;

				if (tab && me.focussedItem == me.dateField) {
					event.stopEvent();
					me.timeField.focus();
					return;
				}

				me.fireEvent('specialkey', field, event);
			});
		}

		me.callParent();

		// this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
		//		this.inputEl = {
		//			dom: {},
		//			swallowEvent: function () { }
		//		};

		me.initField();
	},

	focus: function () {
		this.callParent();
		Ext.defer(this.dateField.focus, 100, this.dateField);
	},

	onItemFocus: function (item) {
		if (this.blurTask) {
			this.blurTask.cancel();
		}
		this.focussedItem = item;
	},

	onItemBlur: function (item, e) {
		/*var me = this;
		if (item != me.focussedItem) { return; }
		// 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
		me.blurTask = new Ext.util.DelayedTask(function () {
			me.fireEvent('blur', me, e);
		});
		me.blurTask.delay(100);*/
	},

	getValue: function () {
		var value = null
            , date = this.dateField.getSubmitValue()
            , time = this.timeField.getSubmitValue()
            , format;

		if (date) {
			if (time) {
				format = this.getFormat();
				value = Ext.Date.parse(date + ' ' + time, format);
			} else {
				value = this.dateField.getValue();
			}
		}
		return value;
	},

	getSubmitValue: function () {
		//        var value = this.getValue();
		//        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;

		var me = this
            , format = me.getFormat()
            , value = me.getValue();

		return value ? Ext.Date.format(value, format) : null;
	},

	setValue: function (value) {
		if (Ext.isString(value)) {
			value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
		}
		this.dateField.setValue(value);
		this.timeField.setValue(value);
	},

	getFormat: function () {
		return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
	},

	// Bug? A field-mixin submits the data from getValue, not getSubmitValue
	getSubmitData: function () {
		var me = this
            , data = null;

		if (!me.disabled && me.submitValue && !me.isFileUpload()) {
			data = {};
			data[me.getName()] = '' + me.getSubmitValue();
		}
		return data;
	},

	isValid: function () {
		return this.dateField.isValid() && this.timeField.isValid();
	}
});