/**
 * The Password field creates a password input and is usually created inside a form. Because it creates a password
 * field, when the user enters text it will show up as stars. Aside from that, the password field is just a normal text
 * field. Here's an example of how to use it in a form:
 *
 *     @example
 *     Ext.create('Ext.form.Panel', {
 *         fullscreen: true,
 *         items: [
 *             {
 *                 xtype: 'fieldset',
 *                 title: 'Register',
 *                 items: [
 *                     {
 *                         xtype: 'emailfield',
 *                         label: 'Email',
 *                         name: 'email'
 *                     },
 *                     {
 *                         xtype: 'passwordfield',
 *                         label: 'Password',
 *                         name: 'password'
 *                     }
 *                 ]
 *             }
 *         ]
 *     });
 *
 * Or on its own, outside of a form:
 *
 *     Ext.create('Ext.field.Password', {
 *         label: 'Password',
 *         value: 'existingPassword'
 *     });
 *
 * Because the password field inherits from {@link Ext.field.Text textfield} it gains all of the functionality that text
 * fields provide, including getting and setting the value at runtime, validations and various events that are fired as
 * the user interacts with the component. Check out the {@link Ext.field.Text} docs to see the additional functionality
 * available.
 */
Ext.define('Ext.field.Password', {
    extend: 'Ext.field.Text',
    xtype: 'passwordfield',
    alternateClassName: 'Ext.form.Password',
 
    requires: [
        'Ext.field.trigger.Reveal'
    ],
 
    config: {
        /**
         * @cfg autoCapitalize
         * @inheritdoc
         */
        autoCapitalize: false,
 
        /**
         * @cfg revealable {Boolean}
         * Enables the reveal toggle button that will show the password in clear text.
         */
        revealable: false,
 
        /**
         * @cfg revealed {Boolean}
         * A value of 'true' for this config will show the password from clear text
         */
        revealed: false,
 
        /**
         * @cfg component
         * @inheritdoc
         */
        component: {
	        xtype: 'passwordinput'
	    }
    },
 
    classCls: Ext.baseCSSPrefix + 'passwordfield',
    revealedCls: Ext.baseCSSPrefix + 'revealed',
 
    isPassword: true,
 
    applyTriggers: function(triggers, oldTriggers) {
        if (triggers && this.getRevealable() && !triggers.reveal) {
            triggers = Ext.apply({
                reveal: {
                    type: 'reveal'
                }
            }, triggers);
        }
 
        return this.callParent([triggers, oldTriggers]);
    },
 
    updateRevealed: function(newValue, oldValue) {
        var me = this,
            component = me.getComponent(),
            revealedCls = me.revealedCls;
 
        if(newValue) {
            me.element.addCls(revealedCls);
            component.setType("text");
        } else {
            me.element.removeCls(revealedCls);
            component.setType("password");
        }
    },
 
    /**
     * @private
     */
    updateValue: function(value, oldValue) {
        this.toggleRevealTrigger(this.isValidTextValue(value));
        this.callParent([value, oldValue]);
    },
 
    doKeyUp: function(me, e) {
        var valid = me.isValidTextValue(me.getValue());
 
        me.toggleClearTrigger(valid);
 
        if (e.browserEvent.keyCode === 13) {
            me.fireAction('action', [me, e], 'doAction');
        }
 
        me.toggleRevealTrigger(valid);
    },
 
    /**
     * @private
     */
    showRevealTrigger: function() {
        var me = this,
            value = me.getValue(),
            // allows value to be zero but not undefined or null (other falsey values) 
            valueValid = value !== undefined && value !== null && value !== "",
            triggers, revealTrigger;
 
        if (me.getRevealable() && !me.getDisabled() && valueValid) {
            triggers = me.getTriggers();
            revealTrigger = triggers && triggers.reveal;
 
            if (revealTrigger) {
                revealTrigger.show();
            }
        }
 
        return me;
    },
 
    /**
     * @private
     */
    hideRevealTrigger: function() {
        var triggers = this.getTriggers(),
            revealTrigger = triggers && triggers.reveal;
 
        if (revealTrigger) {
            revealTrigger.hide();
        }
    },
 
    onRevealTap: function(e) {
        this.fireAction('revealicontap', [this, e], 'doRevealTap');
    },
 
    /**
     * @private
     */
    doRevealTap: function(me, e) {
        this.setRevealed(!this.getRevealed());
    },
 
    privates: {
        isValidTextValue: function(value) {
            // allows newValue to be zero but not undefined or null (other falsey values) 
            return (value !== undefined && value !== null && value !== '');
        },
 
        toggleRevealTrigger: function(state) {
            if (state) {
                this.showRevealTrigger();
            } else {
                this.hideRevealTrigger();
            }
        }
    }
});