/**
 * Creates an HTML file input field on the page. This is usually used to upload files 
 * to remote server.
 * File fields are usually created inside a form like this:
 *
 *     @example
 *     Ext.create('Ext.form.Panel', {
 *         fullscreen: true,
 *         items: [
 *             {
 *                 xtype: 'fieldset',
 *                 title: 'My Uploader',
 *                 items: [
 *                     {
 *                         xtype: 'filefield',
 *                         label: "MyPhoto:",
 *                         name: 'photo',
 *                         accept: 'image'
 *                     }
 *                 ]
 *             }
 *         ]
 *     });
 */
Ext.define('Ext.field.File', {
    extend: 'Ext.field.Text',
    xtype: 'filefield',
 
    mixins: [
        'Ext.mixin.ConfigProxy'
    ],
 
    /**
     * @private
     */
    isFile: true,
 
    proxyConfig: {
        fileButton: [
            /**
             * @cfg multiple
             * @inheritdoc Ext.field.FileButton#multiple
             */
            'multiple',
 
            /**
             * @cfg accept
             * @inheritdoc Ext.field.FileButton#accept
             */
            'accept',
 
            /**
             * @cfg capture
             * @inheritdoc Ext.field.FileButton#capture
             */
            'capture'
        ]
    },
 
    readOnly: true,
    editable: false,
    focusable: false,
    inputTabIndex: -1,
 
    triggers: {
        file: {
            type: 'file'
        }
    },
 
    classCls: Ext.baseCSSPrefix + 'filefield',
 
    captureLookup: {
        video: "camcorder",
        image: "camera",
        audio: "microphone"
    },
 
    onChange: function(me, value, startValue) {
        me.fireEvent('change', this, value, startValue);
    },
 
    applyName: function(name) {
        var multiple;
 
        if (name) {
            if (multiple && name.substr(-2, 2) !== "[]") {
                name += "[]";
            }
            else if ((!multiple) && name.substr(-2, 2) === "[]") {
                name = name.substr(0, name.length - 2);
            }
        }
 
        return name;
    },
 
    updateName: function(name) {
        var fileTrigger = this.getTriggers().file,
            inputElement = fileTrigger && fileTrigger.getComponent().buttonElement.dom;
 
        if (name && inputElement) {
            inputElement.name = name;
        }
    },
 
    updateMultiple: function() {
        var name = this.getName();
 
        if (!Ext.isEmpty(name)) {
            this.setName(name);
        }
    },
 
    updateTriggers: function(triggers, oldTriggers) {
        this.callParent([triggers, oldTriggers]);
        this.getFileButton().on('change', 'onFileButtonChange', this);
    },
 
    updateValue: function(value, oldValue) {
        this.callParent([value, oldValue]);
 
        this.getFileButton().setValue(value);
    },
 
    getFileButton: function() {
        return this.getTriggers().file.getComponent();
    },
 
    /**
     * Resets the fileField values & input values
     * Along with fileButton dom files.
     */
    reset: function() {
        var me = this,
            original = me.originalValue;
 
        if (original == null) {
            me.setInputValue('');
            me._value = '';
        }
        
        me.getFileButton().buttonElement.dom.value = '';
    },
 
    /**
     * Returns the field files.
     * @return {FileList} List of the files selected.
     */
    getFiles: function() {
        return this.getFileButton().getFiles();
    },
 
    privates: {
        onFileButtonChange: function(fileButton, value) {
            var buttonElement = fileButton.buttonElement.dom,
                files = buttonElement.files,
                len, i, file;
 
            if (files) {
                value = [];
 
                for (i = 0, len = files.length; i < len; i++) {
                    file = files[i];
                    value.push(file.name);
                }
 
                value = value.join(', ');
            }
 
            this.setValue(value);
        }
    }
});