/// <reference path="../uiComponent.ts" />
/// <reference path="../../packages.ts" />
/// <reference path="../constants.ts" />
/// <reference path="config.ts" /> 

/**
 * @module UI
 * @submodule UI Assisted Support Plugin
 * @namespace ui
 */

/**
 * Assisted Support Plugin UI Module
 * @class assistedSupportPlugin
 * @static
 */
namespace internal.ui.assistedSupportPlugin {

    const LOAD_TIMEOUT_MS = 15000; // Use this to overwrite the default loaded timeout  
    const REPORT_HEIGHT_CHANGE = true; // set to true to report height change events 
    const ASSISTEDSUPPORTPLUGIN_COMPONENT = "AssistedSupportPlugin";

    /**
     * Render the Assisted Support Plugin UI
     * @method render
     * @static
     * @param {Object} config A {{#crossLink "ui.callback.Config"}}{{/crossLink}} object
     * @param {Object} [config.uiInfo] A {{#crossLink "ui.UIInfo"}}{{/crossLink}} object {{#crossLink "ui.UIInfo"}}{{/crossLink}}
     * @param {String} [config.uiInfo.type] A value in {{#crossLink "ui.HostType"}}{{/crossLink}} which indicates the type of UI to render e.g. IFRAME, POPUP.
     * @param {String} [config.uiInfo.containerSelector] Only required for iframe -- a JQuery selector statement to define the element into which the iframe will be loaded
     * @param {Number} [config.uiInfo.height] The height of the rendered UI
     * @param {Number} [config.uiInfo.width] The width of the rendered UI
     * @return {Promise} A promise that resolves when the UI component has successfully loaded
     * @example
     *
     *     // Render plugin as an IFRAME - this is the only supported rendering for Assisted Support Plugins.
     *     // More UIInfo examples available {{#crossLink "ui.UIInfo"}}here{{/crossLink}}
     *     var uiInfo = {
     *         type: {{#crossLink "ui.HostType"}}MsSupportSdk.ui.HostType.IFRAME{{/crossLink}},
     *         containerSelector: "#iframe-container"
     *     };
     *
     *     // Create a {{#crossLink "ui.assistedSupportPlugin.Config"}}assistedSupportPlugin config{{/crossLink}}
     *     var config = {
     *         uiInfo: uiInfo,
     *         pluginUrl: "https://support.microsoft.com/deviceselector",
     *         puid: "insert puid value here",
     *         locale: "en-us",
     *         product: "windows",
     *         issue: "tech-services",
     *         onCompleted: function() {
     *             console.log("Plugin flow completed.");
     *         },
     *         onCancelled: function () {
     *             console.log("Plugin flow cancelled.");
     *         },
     *         onError: function(e) {
     *             console.log("An error occured.");
     *         }
     *      };
     *
     *     // Render callback UI
     *     MsSupportSdk.ui.assistedSupportPlugin.render(config).then(
     *         function() {
     *             console.log("Assisted Support Plugin rendered successfully."); 
     *         },
     *         function(err) {
     *             console.log(err.message);
     *         });
     */
    export function render(config: Config): JQueryPromise<any> {
        return ui.renderComponent(Component, config, ASSISTEDSUPPORTPLUGIN_COMPONENT);
    }

    export class Component extends UIComponent {

        constructor(config: UIConfig) {
            super(config, LOAD_TIMEOUT_MS, REPORT_HEIGHT_CHANGE);
        }

        public getComponentUrl(): string {
            return (<Config>this.config).pluginUrl;
        }

        public getComponentSdk(): ComponentSDK {
            return {};
        }

        public getXframeProxyUrl(): string {
            return `${utils.getOriginFromUrl(this.getComponentUrl())}/xframeproxy/`;
        }
    }
}