import { MDCDrawer } from '@material/drawer';
import { MDCTopAppBar } from '@material/top-app-bar';
import { h } from "@stencil/core";
import { Host } from "@stencil/core";
export class DrawerWithTopAppBar {
    constructor() {
        this.drawerType = 'fullHeight';
        this.appBarType = 'standard';
    }
    componentWillLoad() {
        this.actions = Array.from(this.host.querySelectorAll('materials-top-app-bar-action'));
        this.items = Array.from(this.host.querySelectorAll('materials-drawer-list-item'));
    }
    async componentDidLoad() {
        if (!this.drawer && this.items.length > 0) {
            this.drawer = MDCDrawer.attachTo(this.host.shadowRoot.querySelector('.mdc-drawer'));
            this.drawer.open = this.open;
            const topAppBar = MDCTopAppBar.attachTo(this.host.shadowRoot.getElementById('app-bar'));
            if (this.drawerType !== 'modal') {
                topAppBar.setScrollTarget(this.host.shadowRoot.getElementById('main-content'));
            }
            topAppBar.listen('MDCTopAppBar:nav', () => {
                this.drawer.open = !this.drawer.open;
            });
        }
    }
    renderAppBar() {
        const classes = {
            'mdc-top-app-bar': true,
            'mdc-top-app-bar--short': this.appBarType === 'short' || this.appBarType === 'short-closed',
            'mdc-top-app-bar--fixed': this.appBarType === 'fixed',
            'mdc-top-app-bar--prominent': this.appBarType === 'prominent',
            'mdc-top-app-bar--dense': this.appBarDense,
            'mdc-top-app-bar--short-collapsed': this.appBarType === 'short-closed',
        };
        return (h("header", { class: classes, id: "app-bar" },
            h("div", { class: "mdc-top-app-bar__row" },
                h("section", { class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-start" },
                    h("a", { class: "demo-menu material-icons mdc-top-app-bar__navigation-icon" }, "menu"),
                    h("span", { class: "mdc-top-app-bar__title" }, this.appBarTitle)),
                h("section", { class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-end", role: "toolbar" }, this.actions.map(a => h("a", { href: "#", class: { 'material-icons': !!a.icon, 'mdc-top-app-bar__action-item': true }, "aria-label": a.actionTitle, title: a.actionTitle }, a.label))))));
    }
    renderDrawerItem(item) {
        return h("a", { class: {
                'mdc-list-item': true,
                'mdc-list-item--activated': item.activated
            }, href: item.targetUrl, onClick: (e) => { item.press(e); }, "aria-current": "page" },
            item.icon && h("i", { class: "material-icons mdc-list-item__graphic", "aria-hidden": "true" }, item.icon),
            h("span", { class: "mdc-list-item__text" }, item.label));
    }
    renderModal() {
        return [
            this.renderAppBar(),
            h("aside", { class: "mdc-drawer mdc-drawer--modal" },
                h("div", { class: "mdc-drawer__content" },
                    h("nav", { class: "mdc-list" }, this.items.map(item => this.renderDrawerItem(item))))),
            h("div", { class: "mdc-drawer-scrim" }),
            h("div", null,
                h("slot", { name: "main" }))
        ];
    }
    renderFull() {
        return [
            h("aside", { class: "mdc-drawer mdc-drawer--dismissible" },
                h("div", { class: "mdc-drawer__content" },
                    h("div", { class: "mdc-list" }, this.items.map(item => this.renderDrawerItem(item))))),
            h("div", { class: "mdc-drawer-app-content" },
                this.renderAppBar(),
                h("main", { class: "main-content", id: "main-content" },
                    h("div", { class: "mdc-top-app-bar--fixed-adjust" },
                        h("slot", { name: "main" }))))
        ];
    }
    renderBelow() {
        return [
            this.renderAppBar(),
            h("aside", { class: "mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust" },
                h("div", { class: "mdc-drawer__content" },
                    h("div", { class: "mdc-list" }, this.items.map(item => this.renderDrawerItem(item))))),
            h("div", { class: "mdc-drawer-app-content mdc-top-app-bar--fixed-adjust" },
                h("main", { class: "main-content", id: "main-content" },
                    h("slot", { name: "main" })))
        ];
    }
    render() {
        switch (this.drawerType) {
            case 'modal':
                return this.renderModal();
            case 'below':
                return h(Host, { class: { 'materials-drawer--below': true } }, this.renderBelow());
            case 'fullHeight':
                return this.renderFull();
        }
    }
    static get is() { return "materials-drawer-with-top-app-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["drawer-with-top-app-bar.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["drawer-with-top-app-bar.css"]
    }; }
    static get properties() { return {
        "drawerType": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'modal' | 'fullHeight' | 'below'",
                "resolved": "\"below\" | \"fullHeight\" | \"modal\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "drawer-type",
            "reflect": false,
            "defaultValue": "'fullHeight'"
        },
        "appBarType": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'fixed' | 'prominent' | 'short' | 'short-closed' | 'standard'",
                "resolved": "\"fixed\" | \"prominent\" | \"short\" | \"short-closed\" | \"standard\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "app-bar-type",
            "reflect": false,
            "defaultValue": "'standard'"
        },
        "appBarDense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "app-bar-dense",
            "reflect": false
        },
        "appBarTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "app-bar-title",
            "reflect": false
        },
        "open": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "open",
            "reflect": false
        }
    }; }
    static get elementRef() { return "host"; }
}
