var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "../../../controls/AtomControl", "../../../controls/AtomGridSplitter", "../../../controls/AtomGridView", "../../../controls/AtomItemsControl"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.MovieList = void 0;
    var AtomControl_1 = require("../../../controls/AtomControl");
    var AtomGridSplitter_1 = require("../../../controls/AtomGridSplitter");
    var AtomGridView_1 = require("../../../controls/AtomGridView");
    var AtomItemsControl_1 = require("../../../controls/AtomItemsControl");
    var MovieList = /** @class */ (function (_super) {
        __extends(MovieList, _super);
        function MovieList() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MovieList.prototype.create = function () {
            var style = this.element.style;
            style.position = "absolute";
            style.left = style.right = style.top = style.bottom = "0";
            this.setPrimitiveValue(this.element, "columns", "30%,5,*");
            this.setPrimitiveValue(this.element, "rows", "30,*");
            var header = document.createElement("header");
            header.textContent = "Header";
            this.setPrimitiveValue(header, "cell", "0:3,0");
            this.append(header);
            var ul = new AtomItemsControl_1.AtomItemsControl(this.app, document.createElement("ul"));
            this.append(ul);
            ul.itemTemplate = MovieListItemTemplate;
            ul.bind(ul.element, "items", [["viewModel", "movies"]], false);
            ul.bind(ul.element, "selectedItem", [["viewModel", "selectedMovie"]], true);
            ul.setPrimitiveValue(ul.element, "cell", "0,1");
            // const e = document.createElement("span");
            // this.append(e);
            // e.style.color = "red";
            // this.bind(e, "text", [["viewModel", "errorSelectedMovie"]]);
            var right = document.createElement("div");
            right.textContent = "right";
            right.style.backgroundColor = "green";
            this.setPrimitiveValue(right, "cell", "2,1");
            this.append(right);
            var splitter = new AtomGridSplitter_1.AtomGridSplitter(this.app);
            this.append(splitter);
            splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
        };
        return MovieList;
    }(AtomGridView_1.AtomGridView));
    exports.MovieList = MovieList;
    var MovieListItemTemplate = /** @class */ (function (_super) {
        __extends(MovieListItemTemplate, _super);
        function MovieListItemTemplate(app, e) {
            return _super.call(this, app, e || document.createElement("li")) || this;
        }
        MovieListItemTemplate.prototype.create = function () {
            var _this = this;
            this.element.style.margin = "2px";
            var span = document.createElement("span");
            this.append(span);
            this.bind(span, "text", [["data", "label"], ["data", "category"]], false, function (label, category) { return label + " (" + category + ")"; });
            this.bind(span, "styleFontWeight", [["data"], ["viewModel", "selectedMovie"]], false, function (d, s) {
                return d === s ? "bold" : "";
            });
            this.bindEvent(span, "click", function (e) {
                _this.viewModel.onItemClick(_this.data);
            });
            var button = document.createElement("button");
            this.append(button);
            button.textContent = "Delete";
            button.style.marginLeft = "10px";
            this.bindEvent(button, "click", function (e) {
                _this.viewModel.onDelete(_this.data);
            });
        };
        return MovieListItemTemplate;
    }(AtomControl_1.AtomControl));
});
//# sourceMappingURL=MovieList.js.map