"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//wijmo
var wjcCore = require("wijmo/wijmo");
var wjInput = require("wijmo/wijmo.react.input");
//Application
var DataSvc_1 = require("../services/DataSvc");
var CustomDataSources = /** @class */ (function (_super) {
    __extends(CustomDataSources, _super);
    function CustomDataSources(props) {
        var _this = _super.call(this, props) || this;
        _this.items = DataSvc_1.DataService.default.getAllItems();
        _this.selectedCountries = ['Belgium', 'Vietnam'];
        _this._cache = {};
        var params = { query: 'start', max: 0 };
        //$.getJSON('companycatalog.ashx', params);
        wjcCore.httpRequest('companycatalog.ashx', {
            data: { query: 'start', max: 0 }
        });
        return _this;
    }
    CustomDataSources.prototype.getCompanies = function (query, max, callback) {
        var _this = this;
        // try getting the result from the cache
        var result = this._cache[query];
        if (result) {
            callback(result);
            return;
        }
        // not in cache, get from server
        var params = { query: query, max: max };
        wjcCore.httpRequest('companycatalog.ashx', {
            data: params,
            success: function (xhr) {
                var response = JSON.parse(xhr.responseText);
                // add 'SymbolName' property to result
                for (var i = 0; i < response.length; i++) {
                    var c = response[i];
                    c.SymbolName = c.Symbol + ': ' + c.Name;
                }
                // store result in cache
                _this._cache[query] = response;
                // and return the result
                callback(response);
            },
            error: function (xhr) {
                console.log('error: ' + xhr.responseText);
                _this._cache[query] = null; // << no point in trying this query again
                callback(null);
            }
        });
    };
    CustomDataSources.prototype.initialized = function (s) {
        this.selectedItemsChanged(s);
    };
    CustomDataSources.prototype.selectedItemsChanged = function (s) {
        var displayItems = '', macSelectedItems1 = document.querySelector('#macSelectedItems2');
        if (s.selectedItems.length > 0) {
            for (var i = 0; i < s.selectedItems.length; i++) {
                displayItems += '<li>' + JSON.stringify(s.selectedItems[i]) + '</li>';
            }
            macSelectedItems1.innerHTML = displayItems;
        }
        else {
            macSelectedItems1.innerHTML = '';
        }
    };
    CustomDataSources.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h4", null, "MultiAutoComplete with custom data sources"),
            React.createElement("p", null,
                "This MultiAutoComplete does not have a static list of items. Instead, it uses the",
                React.createElement("b", null, "itemsSourceFunction"),
                " property to specify a function that makes an Ajax call and returns items asynchronously."),
            React.createElement(wjInput.MultiAutoComplete, { itemsSourceFunction: this.getCompanies.bind(this), displayMemberPath: "SymbolName", selectedValuePath: "Symbol", placeholder: "company name", selectedItemsChanged: this.selectedItemsChanged.bind(this) }),
            React.createElement("ol", { id: "macSelectedItems2" }));
    };
    return CustomDataSources;
}(React.Component));
exports.CustomDataSources = CustomDataSources;
//# sourceMappingURL=CustomDataSources.js.map