(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;
    const AtomControl_1 = require("../../../controls/AtomControl");
    const AtomGridSplitter_1 = require("../../../controls/AtomGridSplitter");
    const AtomGridView_1 = require("../../../controls/AtomGridView");
    const AtomItemsControl_1 = require("../../../controls/AtomItemsControl");
    class MovieList extends AtomGridView_1.AtomGridView {
        create() {
            const 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,*");
            const header = document.createElement("header");
            header.textContent = "Header";
            this.setPrimitiveValue(header, "cell", "0:3,0");
            this.append(header);
            const 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"]]);
            const right = document.createElement("div");
            right.textContent = "right";
            right.style.backgroundColor = "green";
            this.setPrimitiveValue(right, "cell", "2,1");
            this.append(right);
            const splitter = new AtomGridSplitter_1.AtomGridSplitter(this.app);
            this.append(splitter);
            splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
        }
    }
    exports.MovieList = MovieList;
    class MovieListItemTemplate extends AtomControl_1.AtomControl {
        constructor(app, e) {
            super(app, e || document.createElement("li"));
        }
        create() {
            this.element.style.margin = "2px";
            const span = document.createElement("span");
            this.append(span);
            this.bind(span, "text", [["data", "label"], ["data", "category"]], false, (label, category) => `${label} (${category})`);
            this.bind(span, "styleFontWeight", [["data"], ["viewModel", "selectedMovie"]], false, (d, s) => {
                return d === s ? "bold" : "";
            });
            this.bindEvent(span, "click", (e) => {
                this.viewModel.onItemClick(this.data);
            });
            const button = document.createElement("button");
            this.append(button);
            button.textContent = "Delete";
            button.style.marginLeft = "10px";
            this.bindEvent(button, "click", (e) => {
                this.viewModel.onDelete(this.data);
            });
        }
    }
});
//# sourceMappingURL=MovieList.js.map