import { BaseView } from "../../Views/BaseView.js";
import { NavigationItem } from "./NavigationItem.js";
import { NavigationOverflow } from "./NavigationOverflow.js";
export class Navigation extends BaseView {
    constructor(options) {
        super(options);
        this.m_observer = null;
    }
    get source() {
        return super.source;
    }
    get orientation() {
        return this.state.get("orientation", "horizontal");
    }
    get itemsNode() {
        return this.node.children("[role=tabs]");
    }
    get items() {
        return this.controls.getByType(NavigationItem).toArray();
    }
    get overflowNode() {
        return this.node.children("div[role=overflow]");
    }
    get overflow() {
        return this.m_overflow;
    }
    template() {
        return `<div role="tabstrip">
                    <div role="tabs" data-controls></div>
                    <div role="overflow"></div>
                </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.addResizeObserver();
        this.overflow_init();
        this.source.featureSet.groups.forEach(group => {
            this.controls.add(new NavigationItem({
                label: group.name,
                source: group
            }));
        });
        this.itemsNode.append("<div></div>");
        this.source.globals.events.navigationSelectSubscribe((e) => {
            if (e.scrollIntoView) {
                this.scrollIntoView(e.id);
            }
        });
        this.itemsNode.scrollLeft(this.source.globals.storage.navScroll);
    }
    onComplete(e) {
        super.onComplete(e);
        this.selectDefaultNavigation();
    }
    onDestroy(e) {
        super.onDestroy(e);
        this.overflow.destroy();
    }
    onResize(e) {
        let element = this.itemsNode.get(0);
        let isOverflowed = element.clientWidth < element.scrollWidth ||
            element.clientHeight < element.scrollHeight;
        isOverflowed ?
            this.overflow.show() :
            this.overflow.hide();
        let overflowWidth = this.overflowNode.get(0).clientWidth;
        let widthMax = element.clientWidth - overflowWidth;
        let widthSum = 0;
        this.items.forEach(item => {
            widthSum += item.node.get(0).clientWidth;
        });
        isOverflowed = widthMax < widthSum;
        isOverflowed ?
            this.overflow.show() :
            this.overflow.hide();
        this.overflow.update(this.items);
    }
    overflow_init() {
        if (this.orientation !== "horizontal") {
            return;
        }
        this.m_overflow = new NavigationOverflow({
            insertAt: "div[role=overflow]"
        });
        this.controls.add(this.m_overflow);
        let items = [];
        this.source.featureSet.groups.forEach(group => {
            items.push(new NavigationItem({
                label: group.name,
                source: group
            }));
        });
        this.overflow.update(items);
        this.addResizeObserver();
    }
    addResizeObserver() {
        let debounced = _.debounce((e) => {
            this.onResize(e);
        }, 250);
        this.m_observer = new ResizeObserver((e) => {
            debounced(e);
        });
        this.m_observer.observe(this.node.get(0));
    }
    selectDefaultNavigation() {
        let selectedGroupId = this.globals.storage.selectedGroupId;
        if (!Jade.String.isNullOrWhiteSpace(selectedGroupId)) {
            this.controls.getByType(NavigationItem).each(item => {
                if (item.source.id == selectedGroupId) {
                    this.source.globals.events.navigationSelectPublish({
                        id: selectedGroupId
                    });
                }
            });
        }
        else {
            this.source.globals.events.navigationSelectPublish({
                id: _.first(this.source.featureSet.groups).id
            });
        }
    }
    scrollIntoView(id) {
        let total = 0;
        let found = false;
        this.items.forEach(item => {
            item.source.id == id ? found = true : null;
            if (!found) {
                total += item.node.width();
            }
        });
        this.source.globals.storage.navScroll = total;
        this.itemsNode.scrollLeft(total);
    }
}
