import node from "../../support/node";
import wrap from "../../support/node";
/**
 * Represents either a checkbox (multiple choice) or a radio button (single choice) element.
 *
 * @see {@link RadioChoice}
 * @see {@link CheckboxChoice}
 * @see {@link IRenderable}
 *
 * @since 0.23.0
 */
var Choice = /** @class */ (function () {
    function Choice(spec) {
        this.spec = spec;
    }
    Choice.prototype.render = function (renderer, isNested) {
        var _this = this;
        var choiceNode = node("div");
        var input = node("input").addAttributes({
            type: this.inputType(),
            name: "choice",
            value: this.spec.name
        });
        input.addDataAttributes({
            name: this.spec.name
        });
        var label = node("label");
        if (this.spec.text) {
            label.appendChild(this.spec.text || "");
        }
        else {
            var elements = (this.spec.elements || []).map(function (e) { return renderer.render(e, _this); });
            elements.forEach(function (e) { return e.forEach(function (x) { return label.appendChild(wrap(x)); }); });
        }
        label.appendChild(input);
        if (this.spec.selected) {
            input.unwrap().checked = this.spec.selected;
            label.unwrap().classList.add("lto-toggle", "lto-checked");
        }
        this.spec.class !== undefined ? label.addClasses(this.spec.class) : function () {
        };
        if (this.inputType() === "radio") {
            input.unwrap().addEventListener("click", function () {
                var parent = label.getParentByClass("lto-choice-container");
                if (parent) {
                    parent.unwrap().querySelectorAll('input[name=' + input.unwrap().getAttribute("name") + ']').forEach(function (e) {
                        e.parentElement.classList.remove("lto-toggle", "lto-checked", "lto-unchecked");
                        e.parentElement.classList.add("lto-unchecked");
                    });
                    label.addClasses("lto-toggle", "lto-checked");
                    label.unwrap().classList.remove("lto-unchecked");
                }
            });
        }
        else {
            input.unwrap().addEventListener("click", function () {
                if (label.containsClass("lto-checked")) {
                    label.unwrap().classList.remove("lto-checked");
                    label.unwrap().classList.add("lto-unchecked");
                }
                else if (label.containsClass("lto-unchecked")) {
                    label.unwrap().classList.remove("lto-unchecked");
                    label.unwrap().classList.add("lto-checked");
                }
                else {
                    label.addClasses("lto-checked");
                }
                label.toggleClass("lto-toggle");
            });
        }
        choiceNode.appendChild(label);
        return choiceNode.unwrap();
    };
    return Choice;
}());
export { Choice };
//# sourceMappingURL=Choice.js.map