/**
 * An abstract class for fields that have a single trigger which opens a "picker" popup 
 * above the field. It provides a base implementation for toggling the picker's 
 * visibility when the trigger is tapped.
 *
 * You would not normally use this class directly, but instead use it as the parent 
 * class for a specific picker field implementation.
 */
Ext.define('Ext.field.Picker', {
    extend: 'Ext.field.Text',
    xtype: 'pickerfield',
 
    requires: [
        'Ext.field.trigger.Expand'
    ],
 
    config: {
        /**
         * @cfg {Object} component
         * @accessor
         * @hide
         */
        component: {
            readOnly: true,
            useMask: true
        },
 
        /**
         * @cfg {Boolean} clearIcon
         * @hide
         * @accessor
         */
        clearIcon: false,
 
        /**
         * @cfg {String/Boolean} usePicker
         * `true` if you want this component to always use a {@link Ext.picker.Picker}.
         * `false` if you want it to use a popup overlay {@link Ext.List}.
         * `auto` if you want to show a {@link Ext.picker.Picker} only on phones.
         */
        usePicker: 'auto',
 
        /**
         * @cfg {Object} defaultPhonePickerConfig
         * The default configuration for the picker component when you are on a phone.
         * @private
         */
        defaultPhonePickerConfig: null,
 
        /**
         * @cfg {Object} defaultTabletPickerConfig
         * The default configuration for the picker component when you are on a tablet.
         * @private
         */
        defaultTabletPickerConfig: null,
 
        /**
         * @cfg {String} pickerSlotAlign
         * The alignment of text in the picker created by this Select
         * @private
         */
        pickerSlotAlign: 'center',
 
        triggers: {
            expand: {
                type: 'expand'
            }
        }
    },
 
    classCls: Ext.baseCSSPrefix + 'pickerfield',
 
    /**
     * @private
     */
    initialize: function() {
        var me = this,
            component = me.getComponent();
 
        me.callParent();
 
        component.on({
            scope: me,
            masktap: 'onMaskTap'
        });
 
        component.doMaskTap = Ext.emptyFn;
    },
 
    /**
     * @private
     */
    updateDefaultPhonePickerConfig: function(newConfig) {
        var phonePicker = this.phonePicker;
        if (phonePicker) {
            phonePicker.setConfig(newConfig);
        }
    },
 
    /**
     * @private
     */
    updateDefaultTabletPickerConfig: function(newConfig) {
        var tabletPicker = this.tabletPicker;
        if (tabletPicker) {
            tabletPicker.setConfig(newConfig);
        }
    },
 
    /**
     * @private
     * Checks if the value is `auto`. If it is, it only uses the picker if the current device type
     * is a phone.
     */
    applyUsePicker: function(usePicker) {
        if (usePicker === 'auto') {
            usePicker = Ext.os.deviceType === 'Phone';
        }
 
        return Boolean(usePicker);
    },
 
    /**
     * @private
     */
    onMaskTap: function(e) {
        this.onExpandTap(e);
    },
 
    onExpandTap: function() {
        if (!this.getDisabled()) {
            this.onFocus();
        }
 
        return false;
    },
 
    onFocus: function(e) {
        if (this.getDisabled()) {
            return false;
        }
 
        var component = this.getComponent();
        this.fireEvent('focus', this, e);
 
        if (Ext.os.is.Android4) {
            component.inputElement.dom.focus();
        }
        component.inputElement.dom.blur();
 
        this.isFocused = true;
 
        this.showPicker();
    },
 
    doDestroy: function() {
        var me = this;
 
        me.tabletPicker = me.phonePicker = Ext.destroy(me.tabletPicker, me.phonePicker);
        
        me.callParent();
    }
});