import { __decorate, __metadata } from "tslib";
import '@operato/i18n/ox-i18n.js';
import { css, html, LitElement } from 'lit';
import { customElement, state, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers';
import { store } from '@operato/shell';
import { isMobileDevice } from '@operato/utils';
let MenuTools = class MenuTools extends connect(store)(LitElement) {
    constructor() {
        super(...arguments);
        this.width = '';
        this.page = '';
        this.resourceId = '';
        this.isFullScreen = false;
    }
    static { this.styles = [
        css `
      :host {
        display: flex;
        background-color: var(--primary-color);
        /* for narrow mode */
        flex-direction: column;
        width: 100%;
        border-right: 1px solid var(--md-sys-color-on-tertiary-container);
        max-width: -webkit-fill-available;
      }

      :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='NARROW']) ul {
        margin: 0;
        padding: 0;
      }
      :host([width='NARROW']) li {
        flex: 1;
      }

      a {
        display: block;
        margin-top: var(--margin-default);
        padding: var(--padding-default);
        padding-bottom: var(--padding-wide);
        min-width: 75px;
        border-width: 0 1px;
        text-align: center;
        text-decoration: none;
        color: var(--md-sys-color-surface-tint);
      }

      :host([width='NARROW']) a {
        padding: var(--padding-narrow);
      }

      :host([width='NARROW']) a[active]::before {
        margin-left: 14%;
      }

      a[active] {
        color: var(--md-sys-color-on-secondary);
        background-color: rgba(0, 0, 0, 0.3);
      }
      a[active]::before {
        content: 'v';
        width: 14px;
        height: 14px;
        display: block;
        border-radius: 10px;
        background-color: var(--status-success-color);
        margin-left: 50%;
        margin-top: 20px;
        position: absolute;
        color: var(--md-sys-color-on-secondary);
        line-height: 0.7;
      }
      a:hover {
        color: var(--md-sys-color-on-secondary);
      }
      md-icon {
        padding: var(--padding-narrow) var(--padding-default) var(--padding-narrow) var(--padding-default);
        vertical-align: bottom;
        --mdc-icon-size: 32px;
      }

      div {
        font-size: 0.9em;
      }

      /* Mobile Styles */
      @media (max-width: 768px) {
        a {
          min-width: unset;
          margin-top: 0;
        }

        md-icon {
          --mdc-icon-size: 28px;
        }
      }
    `
    ]; }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('fullscreenchange', this._onFullScreenChange.bind(this));
        store.subscribe(() => {
            const state = store.getState();
            if (state.isFullScreen !== undefined) {
                this.isFullScreen = state.isFullScreen;
                this.requestUpdate();
            }
        });
    }
    disconnectedCallback() {
        document.removeEventListener('fullscreenchange', this._onFullScreenChange.bind(this));
        super.disconnectedCallback();
    }
    _onFullScreenChange() {
        this.isFullScreen = !!document.fullscreenElement;
        this.requestUpdate();
    }
    render() {
        if (!isMobileDevice() && this.isFullScreen) {
            return null;
        }
        return html `
      <ul>
        <li>
          <a href="dashboard/${this.resourceId}" ?active=${this.page == '' || this.page == 'dashboard'}>
            <md-icon>photo_filter</md-icon>
            <div><ox-i18n msgid="대시보드"></ox-i18n></div>
          </a>
        </li>
        <li>
          <a href="generation-status/${this.resourceId}" ?active=${this.page == 'generation-status'}>
            <md-icon>ssid_chart</md-icon>
            <div><ox-i18n msgid="발전현황"></ox-i18n></div>
          </a>
        </li>
        <li>
          <a href="power-generation-history/${this.resourceId}" ?active=${this.page == 'power-generation-history'}>
            <md-icon>offline_bolt</md-icon>
            <div><ox-i18n msgid="발전이력"></ox-i18n></div>
          </a>
        </li>
        <li>
          <a href="issue-history/${this.resourceId}" ?active=${this.page == 'issue-history'}>
            <md-icon>notifications_active</md-icon>
            <div><ox-i18n msgid="상태정보"></ox-i18n></div>
          </a>
        </li>
        <li>
          <a href="market-info/${this.resourceId}" ?active=${this.page == 'market-info'}>
            <md-icon>insights</md-icon>
            <div><ox-i18n msgid="시장정보"></ox-i18n></div>
          </a>
        </li>
      </ul>
    `;
    }
    stateChanged(state) {
        this.page = state.route.page;
        this.resourceId = state.route.resourceId;
        this.width = state.layout.width;
    }
};
__decorate([
    property({ reflect: true }),
    __metadata("design:type", String)
], MenuTools.prototype, "width", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], MenuTools.prototype, "page", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], MenuTools.prototype, "resourceId", void 0);
__decorate([
    state(),
    __metadata("design:type", Boolean)
], MenuTools.prototype, "isFullScreen", void 0);
MenuTools = __decorate([
    customElement('menu-tools')
], MenuTools);
export { MenuTools };
//# sourceMappingURL=menu-tools.js.map