import { BaseView } from "../../BaseView.js";
export default class HeaderView extends BaseView {
    constructor(options) {
        super(options);
    }
    get source() {
        return super.source;
    }
    get filterNode() {
        return this.node.find("input[role=filter]");
    }
    get rightGroupNode() {
        return this.node.children("div:last-child");
    }
    get leftGroupNode() {
        return this.node.children("div:first-child");
    }
    template() {
        return `<div class="-fb-grid-header">
            <div role="group-l"></div>
            <div role="group-r"></div>
        </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.buttons_init();
        this.filter_init();
    }
    onComplete(e) {
        super.onComplete(e);
        let filter = this.source.locals.storage?.filter;
        if (filter != null) {
            this.filterNode.val(filter);
        }
    }
    filter_init() {
        this.rightGroupNode.css({
            display: "inline-block",
            width: "200px",
            boxSizing: "border-box",
            paddingBottom: "3px"
        });
        this.rightGroupNode.append(`<input type="text" role="filter" placeholder="Filter..."/>`);
        this.filterNode.css({
            height: "100%",
            width: "100%",
            boxSizing: "border-box"
        });
        this.filterNode.on(Jade.BrowserEvent.KEYUP, (e) => {
            e.cancelBubble = true;
            e.stopPropagation();
            e.returnValue = false;
            this.source.locals.events.filterPublish({
                term: this.filterNode.val()
            });
            return false;
        });
    }
    buttons_init() {
        this.leftGroupNode.css({
            display: "inline-block",
            boxSizing: "border-box"
        });
        this.addButton("navigate_down_two.png", () => {
            this.source.locals.events.categoriesExpandAllPublish();
        });
        this.addButton("navigate_right_two.png", () => {
            this.source.locals.events.categoriesCollapseAllPublish();
        });
    }
    addButton(icon, callback = () => { }) {
        icon = Jade.IconSet.get("pdjs")
            .resolve(icon, Jade.IconSetSizeSpecificDirectory.x16);
        let button = $(`<div class="-fb-grid-header-button">
                    <img src="${icon}"/>
                </div>`);
        button.on(Jade.BrowserEvent.CLICK, () => {
            callback();
        });
        this.leftGroupNode.append(button);
    }
}
