/// class PD.Web.UI.Controls.UploadInput
/// using PD.Web.UI.Controls.Control

PD.Web.UI.Controls.UploadInput =
PD.Web.UI.Controls.Control.extend({

    //===========================
    // CONSTANTS
    //===========================

    //===========================
    // FIELDS
    //===========================

    _file: null,
    _upload: null,

    //===========================
    // PROPERTIES
    //===========================

    get_browseButton: function () {
        return this.get_node().find("input[type=button]");
    },

    get_label: function () {
        return this.get_node().find(".-pd-upload-input-label");
    },

    get_scale: function () {
        return this.get_node().find(".-pd-upload-input-scale");
    },

    get_uploadName: function () {
        return this._file != null ? this._file.name : null;
    },

    get_uploadId: function () {
        return this._file != null ? this._file.id : null;
    },

    get_uploadExtension: function () {
        return this._file != null ? "." + PD.Path.getExtension(this._file.name) : null;
    },

    get_uploadUniqueName: function () {
        return this.get_uploadId() + this.get_uploadExtension();
    },

    //===========================
    // EVENT HANDLERS
    //===========================

    onActivate: function () {
        this._upload_activate();
        
    },

    _upload_onFilesAdded: function (e) {
        
        var callback = this.get_options().fileSelected;

        this._file = _.first(e);
        
        if (_.isFunction(callback)) {
            callback(this._file);
        }

        this._upload.start();

    },

    _upload_onStart: function (e) {

        var callback = this.get_options().uploadStart;

        this.get_browseButton().prop("disabled", true);

        if (_.isFunction(callback)) {
            callback(this._file);
        }

    },

    _upload_onProgress: function (e) {

        var $scale = this.get_scale();
        var $label = this.get_label();

        $label.text("Uploading file... " +e.percent + " %");
        $scale.css({
            width: e.percent + "%"
        });

    },

   _upload_onComplete: function (e) {

        var callback = this.get_options().uploadComplete;

        var $scale = this.get_scale();
        var $label = this.get_label();

        $label.text(this._file.name);
        $scale.css({
            width: "0"
        });

        this.get_browseButton().prop("disabled", false);

        if(_.isFunction(callback)) {
            callback();
        }

    },

    _upload_onError: function (e) {

        Jade.UI.MessageDialog.open({
            dialogStyle: Jade.UI.MessageDialogStyle.Error,
            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
            title: e.error.title,
            message: e.error.message,
            select: (e) => {
                e.close();
            }
        });

        this.get_browseButton().prop("disabled", false);

    },

    //===========================
    // PUBLIC METHODS
    //===========================

    //===========================
    // PROTECTED METHODS
    //===========================

    template: function (options) {
        return [
            "<div class='-pd-upload-input'>",
                "<div class='-pd-upload-input-progress'>",
                    "<div class='-pd-upload-input-background'></div>",
                    "<div class='-pd-upload-input-scale'>&nbsp;</div>",
                    "<div class='-pd-upload-input-label'>&nbsp;</div>",
                "</div>",
                "<input type='button' value='...' class='-pd-upload-input-button'/>",
            "</div>"
        ];
    },

    //===========================
    // PRIVATE METHODS
    //===========================

    _upload_activate: function () {

        this._upload = new PD.Web.UI.Controls.Upload({
            browse_button: this.get_browseButton().get(0),
            container: this.get_id(),
            multi_selection: false,
            onFileAdded: _.bind(this._upload_onFilesAdded, this),
            onUploadStart: _.bind(this._upload_onStart, this),
            onUploadProgress: _.bind(this._upload_onProgress, this),
            onUploadComplete: _.bind(this._upload_onComplete, this),
            onError: _.bind(this._upload_onError, this)
        });

        this.get_children().add(this._upload);

    }

});