import { BaseView } from "../../BaseView.js";
import { InputView } from "../../Assembler/Grid/InputView.js";
export class CategoryView extends BaseView {
    constructor(options) {
        super(options);
        this.m_editors = options.editors;
        this.state.unset("editors");
    }
    get source() {
        return super.source;
    }
    get label() {
        return this.state.get("label");
    }
    get editors() {
        return this.m_editors;
    }
    get header() {
        return this.node.find(".-fb-grid-category-header");
    }
    get content() {
        return this.node.find(".-fb-grid-category-inputs");
    }
    get toggle() {
        return this.header.children(".-fb-grid-category-header-toggle");
    }
    get inputs() {
        return this.controls.getByType(InputView);
    }
    get visible() {
        return this.node.is(":visible");
    }
    get isExpanded() {
        return this.content.is(":visible");
    }
    template() {
        return `<div class="-fb-grid-category">
                    <div class="-fb-grid-category-header"><i class="icofont-simple-down -fb-grid-category-header-toggle" />${this.label}</div>
                    <div class="-fb-grid-category-inputs" data-controls></div>
                </div>`;
    }
    expand() {
        this.content.show();
        this.toggle.removeClass("icofont-simple-right");
        this.toggle.addClass("icofont-simple-down");
        this.source.locals.events.categoryTogglePublish();
    }
    collapse() {
        this.content.hide();
        this.toggle.removeClass("icofont-simple-down");
        this.toggle.addClass("icofont-simple-right");
        this.source.locals.events.categoryTogglePublish();
    }
    onActivate(e) {
        super.onActivate(e);
        this.header.on(Jade.BrowserEvent.CLICK, (e) => { this.toggle_onClick(e); });
        this.populate();
    }
    populate() {
        this.editors.forEach((editor) => {
            let input = new InputView({
                editor: editor
            });
            this.controls.add(input);
        });
    }
    toggle_onClick(e) {
        this.isExpanded ? this.collapse() : this.expand();
    }
}
