/**
 * Provides a time input field with a analog time picker and automatic time validation.
 *
 * This field recognizes and uses JavaScript Date objects to validate input from {@link #picker}.
 * In addition, it recognizes string values which are parsed according to the {@link #format} config.
 * These may be reconfigured to use time formats appropriate for the user's locale.
 *
 * Example usage:
 *
 *      @example
 *      Ext.create('Ext.form.Panel', {
 *           fullscreen: true,
 *           items: [
 *               {
 *                   xtype: 'fieldset',
 *                   items: [
 *                       {
 *                          xtype: 'timefield',
 *                          itemId: '123',
 *                          label: 'Birthday',
 *                          name: 'birthday',
 *                          value: '12:00 PM'
 *                       }
 *                   ]
 *               }
 *           ]
 *       });
 */
Ext.define('Ext.field.Time', {
    extend: 'Ext.field.Picker',
    xtype: 'timefield',
 
    requires: [
        'Ext.field.trigger.Time',
        'Ext.panel.Time',
        'Ext.data.validator.Time'
    ],
 
    config: {
        triggers: {
            expand: {
                type: 'time'
            }
        },
 
        /**
         * @cfg {String} format 
         * The format to be used when displaying time in this field. Accepts any valid time
         * format supported by {@link Ext.Date#parse}. The list of supported formats can be
         * found in {@link Ext.Date} documentation.
         *
         * Default is to use {@link Ext.Date#defaultTimeFormat} that depends on the chosen
         * locale. For en-US this is `'h:i A'`, e.g. `'03:42 PM'`. To set 24-hour format
         * without changing locale entirely, use `'H:i'` or similar.
         *
         * @locale
         * @since 6.6.0
         */
        format: '',
 
        /**
         * @cfg {String|String[]} altFormats
         * Multiple date formats separated by "|" or an array of date formats
         * to try when parsing a user input value and it doesn't match the defined format.
         * @locale
         * @since 6.6.0
         */
        altFormats: 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A'
    },
 
    platformConfig: {
        'phone || tablet': {
            floatedPicker: {
                modal: true,
                centered: true
            },
            errorTarget: 'under'
        }
    },
 
    picker: 'floated',
 
    floatedPicker: {
        xtype: 'timepanel',
        floated: true,
        confirmable: true,
        listeners: {
            select: 'onPickerChange',
            collapsePanel: 'collapse',
            scope: 'owner'
        }
    },
 
    initDate: '1970-01-01',
    initDateFormat: 'Y-m-d',
 
    matchFieldWidth: false,
 
    createFloatedPicker: function (config) {
        var pickerConfig = this.getFloatedPicker();
 
        return Ext.apply(pickerConfig, config);
    },
 
    getAutoPickerType: function () {
        return 'floated';
    },
 
    /**
     * Called when the picker changes its value.
     * @param {Ext.panel.Time} picker The Time picker.
     * @param {Object} value The new value from the time picker.
     * @private
     */
    onPickerChange: function (picker, value) {
        var me = this;
 
        me.forceInputChange = true;
        me.setValue(value);
        me.forceInputChange = false;
 
        me.fireEvent('select', me, value);
 
        me.collapse();
    },
 
    parseValue: function (value, errors) {
        var me = this,
            date = value,
            defaultFormat = me.getFormat(),
            altFormats = me.getAltFormats(),
            formats = [defaultFormat].concat(altFormats),
            i, len, format;
 
        if (date) {
            if (!Ext.isDate(date)) {
 
                for (i = 0, len = formats.length; i < len; i++) {
                    format = formats[i];
                    date = Ext.Date.parse(
                        me.initDate + ' ' + value,
                        me.initDateFormat + ' ' + format
                    );
 
                    if (date) {
                        return date;
                    }
                }
            }
 
            if (date) {
                return date;
            }
        }
 
        return this.callParent([value, errors]);
    },
 
    realignFloatedPicker: function (picker) {
        picker = picker || this.getPicker();
 
        if (picker.isCentered()) {
            picker.center();
        }
        else {
            return this.callParent([picker]);
        }
    },
 
    showPicker: function () {
        var me = this,
            picker;
 
        me.callParent();
 
 
        picker = me.getPicker();
        picker.setValue(me.getValue());
 
        // For modal pickers (phones and tablets) we need to move the focus 
        // due to software keyboards potentially moving the content off screen 
        if (picker.getModal()) {
            me.getFocusTrap().focus();
        }
    },
 
 
    transformValue: function (value) {
        if (Ext.isDate(value)) {
            if (isNaN(value.getTime())) {
                value = null;
            }
        }
 
        return value;
    },
 
    applyInputValue: function (value, oldValue) {
        if (Ext.isDate(value)) {
            return Ext.Date.format(value, this.getFormat());
        }
 
        return this.callParent([value, oldValue]);
    },
 
    applyPicker: function (picker, oldPicker) {
        var me = this;
 
        if (picker === 'edge') {
            //<debug> 
            Ext.log.warn('Time Panel does not support "edge" picker, defaulting to "floated"');
            //</debug> 
            picker = 'floated'
        }
 
        picker = me.callParent([picker, oldPicker]);
 
        if (picker) {
            picker.ownerCmp = me;
        }
 
        return picker;
    },
 
    applyAltFormats: function (altFormats) {
        if (!altFormats) {
            return [];
        } else if (!Ext.isArray(altFormats)) {
            return altFormats.split('|');
        }
 
        return altFormats;
    },
 
    applyFormat: function (format) {
        return format || Ext.Date.defaultTimeFormat;
    },
 
    updateFormat: function (format) {
        this.setParseValidator({
            type: 'time',
            format: format
        });
    },
 
    applyValue: function (value, oldValue) {
        if (!(value || value === 0)) {
            value = null;
        }
 
        value = this.callParent([value, oldValue]);
 
        if (value) {
            if (this.isConfiguring) {
                this.originalValue = value;
            }
        }
 
        return value;
    },
 
    updateValue: function (value, oldValue) {
        // Using a getter will create the picker instance if it does not exist. 
        // We don't want this here. 
        var picker = this._picker;
 
        if (picker) {
            picker.setValue(value);
        }
 
        this.callParent([value, oldValue]);
    }
});