"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Renderables_1 = require("../Renderables");
var node_1 = require("../../support/node");
var node_2 = require("../../support/node");
var Specification_1 = require("../../support/Specification");
/**
 * You can put elements into a basket and remove them as well.
 * Basket has a button to add a child component.
 * Each child has their own remove button.
 * For CSS manipulation use .lto-basket, .lto-basket-entity,.lto-add-to-basket, .lto-remove-from-basket
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var Basket = /** @class */ (function () {
    function Basket(spec) {
        var _this = this;
        /**
         * @inheritDoc
         */
        this.render = function (renderer) { return _this.renderBasket(renderer).unwrap(); };
        this.renderAddButton = function (basket, renderer) { return Basket.renderButton("lto-add-to-basket", function () { return basket.appendChild(_this.renderBasketEntity(basket, renderer)); }); };
        this.renderRemoveButton = function (basket, entity) { return Basket.renderButton("lto-remove-from-basket", function () { return basket.removeChild(entity); }); };
        this.spec = new Specification_1.Specification(spec);
    }
    Basket.prototype.renderBasket = function (renderer) {
        var basket = node_1.default("div");
        this.spec.initNode(basket, "lto-basket");
        basket.setAriaLabel(this.spec.raw.ariaLabel);
        basket.appendChild(this.renderAddButton(basket, renderer));
        return basket;
    };
    Basket.prototype.renderBasketEntity = function (basket, renderer) {
        var _this = this;
        var entity = node_1.default("div");
        entity.addClasses("lto-basket-entity");
        var elements = (this.spec.raw.elements || []).map(function (e) { return renderer.render(e, _this); });
        elements.forEach(function (e) { return e.forEach(function (x) { return entity.appendChild(node_2.default(x)); }); });
        entity.appendChild(this.renderRemoveButton(basket, entity));
        return entity;
    };
    Basket.renderButton = function (className, callback) {
        var button = node_1.default("div");
        button.addClasses(className);
        button.onClick(callback);
        return button;
    };
    return Basket;
}());
exports.Basket = Basket;
Renderables_1.default.register("basket", Basket);
//# sourceMappingURL=index.js.map