import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@operato/i18n/ox-i18n.js';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers';
import { store } from '@operato/shell';
import { privileged } from '@things-factory/auth-base/dist-client';
let MenuTools = class MenuTools extends connect(store)(LitElement) {
    static { this.styles = [
        css `
      :host {
        display: flex;
        background-color: var(--menu-tools-background-color);

        /* for narrow mode */
        flex-direction: column;
        width: 100%;
      }

      :host([width='WIDE']) {
        /* for wide mode */
        flex-direction: row;
        width: initial;
        height: 100%;
      }

      ul {
        display: flex;
        flex-direction: row;

        margin: auto;
        padding: 0;
        list-style: none;
        height: 100%;
        overflow: none;
      }

      :host([width='WIDE']) ul {
        flex-direction: column;
      }

      :host([width='WIDE']) li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }

      a {
        display: block;
        padding: 5px 0px;
        text-align: center;
        text-decoration: none;
        color: var(--menu-tools-color);
      }

      a[active] {
        color: var(--menu-tools-active-color);
        background-color: rgba(0, 0, 0, 0.2);
      }

      md-icon {
        font-variation-settings: 'FILL' 0;

        padding: 5px 15px 0px 15px;
        vertical-align: bottom;
      }

      div {
        font-size: 0.6em;
      }
    `
    ]; }
    render() {
        return this.context && this.context['board_topmenu']
            ? html `
          <ul>
            <li>
              <a href="board-list" ?active=${this.page == 'board-list'}>
                <md-icon>dvr</md-icon>
                <div><ox-i18n msgid="label.board"></ox-i18n></div>
              </a>
            </li>
            <li>
              <a href="play-list" ?active=${this.page == 'play-list'}>
                <md-icon>airplay</md-icon>
                <div><ox-i18n msgid="label.player"></ox-i18n></div>
              </a>
            </li>
            ${privileged({ privilege: 'mutation', category: 'board' }, html `
            <li>
              <a href="board-template-list" ?active=${this.page == 'board-template-list'}>
                <md-icon>developer_board</md-icon>
                <div><ox-i18n msgid="label.template"></ox-i18n></div>
              </a>
            </li>
            <li>
              <a href="attachment-list" ?active=${this.page == 'attachment-list'}>
                <md-icon>attachment</md-icon>
                <div><ox-i18n msgid="label.attachment"></ox-i18n></div>
              </a>
            </li>
            <li>
              <a href="connection-list" ?active=${this.page == 'connection-list'}>
                <md-icon>device_hub</md-icon>
                <div><ox-i18n msgid="label.connection"></ox-i18n></div>
              </a>
            </li>
            <li>
              <a href="scenario-list" ?active=${this.page == 'scenario-list'}>
                <md-icon>format_list_numbered</md-icon>
                <div><ox-i18n msgid="label.scenario"></ox-i18n></div>
              </a>
            </li>
          </ul>
            `)}
          </ul>
        `
            : html ``;
    }
    stateChanged(state) {
        this.page = state.route.page;
        this.width = state.layout.width;
        this.context = state.route.context;
    }
};
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], MenuTools.prototype, "page", void 0);
__decorate([
    property({ type: String, reflect: true }),
    __metadata("design:type", String)
], MenuTools.prototype, "width", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], MenuTools.prototype, "context", void 0);
MenuTools = __decorate([
    customElement('menu-tools')
], MenuTools);
export { MenuTools };
//# sourceMappingURL=menu-tools.js.map