/// class PD.Hub.FileReplaceDialog
/// using PD.Web.UI.Dialog

PD.Hub.FileReplaceDialog =
PD.Web.UI.Dialog.extend({

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

    _uploadInput: null,

    //===================================
    // CONSTRUCTOR
    //===================================

    init: function (options) {

        this._super($.extend(true, {
            fileId: null,
            fileName: null,
            fileExtension: null,
            config: {
                resizable: false,
                height: "100px",
                width: "400px",
                title: "Replace File "
            }
        }, options));

    },

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

    get_okButton: function () {
        return this.get_node().find("BUTTON[data-id=ok]");
    },

    get_cancelButton: function () {
        return this.get_node().find("BUTTON[data-id=cancel]");
    },

    get_checkBox: function () {
        return this.get_node().find("INPUT[type=checkbox]");
    },

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

    onInit: function () {
        this._init_uploadInput();
    },

    onActivate: function () {
        this.get_okButton().prop("disabled", true);
        this.get_okButton().on("click", _.bind(this.okButton_onClick, this));
        this.get_cancelButton().on("click", _.bind(this.cancelButton_onClick, this));
    },

    okButton_onClick: function () {
        this._executeReplace();
    },

    cancelButton_onClick: function () {
        this.close();
    },

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

    template: function (e) {

        return [
            "<div class='-pd-file-replace-dialog'>",
                "<div class='-pd-dialog-content'>",
                    "<div>",
                        "<div style='margin-bottom:5px;font-size:12px;'>Replace the file <b>" + this._getFileName() + "</b>:</div>",
                        "<div data-id='file-input' style='margin-bottom: 10px;'></div>",
                    "</div>",
                "</div>",
                "<div class='-pd-dialog-button-deck'>",
                    "<button class='-pd-button' data-id='ok'>Replace</button>",
                    "<button class='-pd-button' data-id='cancel'>Cancel</button>",
                "</div>",
            "</div>"
        ];

    },

    _init_uploadInput: function () {

        var that = this;

        this._uploadInput = new PD.Web.UI.Controls.UploadInput({
            insertAt: "[data-id=file-input]",
            uploadStart: function (e) {
                that.get_okButton().prop("disabled", true);
            },
            uploadComplete: function (e) {
                that.get_okButton().prop("disabled", false);
            }
        });

        this.get_children().add(this._uploadInput);

    },

    _executeReplace: function () {

        var that = this;

        PD.ajax({
            type: "POST",
            url: PD.Path.resolve("~/Hub/ExplorerContent/ReplaceFile"),
            data: {
                fileId: this.get_options().fileId,
                uploadId: this._uploadInput.get_uploadId() + this._uploadInput.get_uploadExtension()
            },
            success: function () {
                that.close();
                that._showSuccessDialog();
            },
            error: function () {
                that.close();
            }
        });

    },

    _showConfirmationDialog: function (callback) {

        PD.Web.UI.MessageDialog.warn({
            title: "Replace File?",
            message: "You are about to replace the '" + this._getFileName() + "' file? Do you wish to continue?",
            ok: function (e) {
                e.close();
                callback(e);
            }
        });

    },

    _showSuccessDialog: function () {

        PD.Web.UI.MessageDialog.success({
            title: "Replace File",
            message: `The file "${this._getFileName()}" has been replaced successfully.`
        });

    },

    _getFileName: function () {
        return this.get_options()["fileName"] + this.get_options()["fileExtension"];
    }

});

PD.Hub.FileReplaceDialog.open =
function (options) {
    return new PD.Hub.FileReplaceDialog(options);
};