import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import compentStyle from "./top-bar.css.js";
import "../icon-button/icon-button.js";
import "../clock/clock.js";
import "../divider/divider.js";
import "../breadcrumb/breadcrumb.js";
import "../../icons/icon-menu-iec.js";
import "../../icons/icon-home.js";
import "../../icons/icon-close-google.js";
import "../../icons/icon-arrow-left-google.js";
import "../../icons/icon-arrow-right-google.js";
import "../../icons/icon-palette-day-night-iec.js";
import "../../icons/icon-applications.js";
import "../../icons/icon-more-vertical-google.js";
import "../../icons/icon-user.js";
import { customElement } from "../../decorator.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var ObcTopBarMenuButtonIcon = /* @__PURE__ */ ((ObcTopBarMenuButtonIcon2) => {
  ObcTopBarMenuButtonIcon2["Menu"] = "menu";
  ObcTopBarMenuButtonIcon2["Home"] = "home";
  return ObcTopBarMenuButtonIcon2;
})(ObcTopBarMenuButtonIcon || {});
let ObcTopBar = class extends LitElement {
  constructor() {
    super(...arguments);
    this.appTitle = "App";
    this.pageName = "Page";
    this.menuButtonIcon = "menu";
    this.menuButtonActivated = false;
    this.dimmingButtonActivated = false;
    this.appsButtonActivated = false;
    this.leftMoreButtonActivated = false;
    this.userButtonActivated = false;
    this.userButtonDisabled = false;
    this.tall = false;
    this.wideMenuButton = false;
    this.showAppsButton = false;
    this.showDimmingButton = false;
    this.showUserButton = false;
    this.showClock = false;
    this.showDate = false;
    this.showAppIcon = false;
    this.inactive = false;
    this.appButtonBreakpointPx = 500;
    this.dimmingButtonBreakpointPx = 500;
    this.appTitleBreakpointPx = 500;
    this.userButtonBreakpointPx = 500;
    this.appIconBreakpointPx = 500;
    this.settings = false;
    this.breadcrumbItems = [];
    this.leftButtonEvent = null;
    this.leftButtonTimeout = null;
    this.isLeftButtonDown = false;
    this.isEmergencyBrightness = false;
  }
  dimmingButtonClicked() {
    this.dispatchEvent(new CustomEvent("dimming-button-clicked"));
  }
  appsButtonClicked() {
    this.dispatchEvent(new CustomEvent("apps-button-clicked"));
  }
  leftMoreButtonClicked() {
    this.dispatchEvent(new CustomEvent("left-more-button-clicked"));
  }
  userButtonClicked() {
    this.dispatchEvent(new CustomEvent("user-button-clicked"));
  }
  leftButtonDown(event) {
    this.leftButtonEvent = event;
    this.isLeftButtonDown = true;
    this.leftButtonTimeout = setTimeout(() => {
      this.leftButtonEvent = null;
      this.dispatchEvent(new CustomEvent("emergency-brightness-start"));
      this.isEmergencyBrightness = true;
    }, 500);
  }
  leftButtonUp() {
    if (this.leftButtonEvent) {
      this.dispatchEvent(this.leftButtonEvent);
      this.leftButtonEvent = null;
    }
    if (this.leftButtonTimeout) {
      clearTimeout(this.leftButtonTimeout);
      this.leftButtonTimeout = null;
    }
    if (this.isEmergencyBrightness) {
      this.dispatchEvent(new CustomEvent("emergency-brightness-stop"));
      this.isEmergencyBrightness = false;
    }
    this.isLeftButtonDown = false;
  }
  leftButtonLeave() {
    if (!this.isLeftButtonDown) return;
    if (this.leftButtonTimeout) {
      clearInterval(this.leftButtonTimeout);
      this.leftButtonTimeout = null;
    }
    if (this.isEmergencyBrightness) {
      this.dispatchEvent(new CustomEvent("emergency-brightness-stop"));
      this.isEmergencyBrightness = false;
    }
    this.isLeftButtonDown = false;
  }
  render() {
    const leftGroup = [];
    if (this.settings) {
      leftGroup.push(
        html`<div class="menu-button">
          <obc-icon-button
            variant="flat"
            @pointerdown=${() => this.leftButtonDown(new CustomEvent("close"))}
            @pointerup=${() => this.leftButtonUp()}
            @pointerleave=${() => this.leftButtonLeave()}
          >
            <obi-close-google></obi-close-google>
          </obc-icon-button>
        </div>`
      );
      leftGroup.push(html`<div class="divider"></div>`);
      leftGroup.push(
        html`<obc-icon-button
          variant="flat"
          @click=${() => this.dispatchEvent(new CustomEvent("back"))}
        >
          <obi-arrow-left-google></obi-arrow-left-google>
        </obc-icon-button>`
      );
      leftGroup.push(html`<div class="title">${this.appTitle}</div>`);
      leftGroup.push(
        html`<obc-breadcrumb
          .items=${this.breadcrumbItems}
          @breadcrumb-click=${(e) => this.dispatchEvent(
          new CustomEvent("breadcrumb-click", {
            detail: e.detail
          })
        )}
        ></obc-breadcrumb>`
      );
    } else {
      if (!this.inactive) {
        leftGroup.push(
          html`<div class="menu-button ${this.wideMenuButton ? "wide" : null}">
            <obc-icon-button
              variant="flat"
              @pointerdown=${() => this.leftButtonDown(new CustomEvent("menu-button-clicked"))}
              @pointerup=${() => this.leftButtonUp()}
              @pointerleave=${() => this.leftButtonLeave()}
              ?activated=${this.menuButtonActivated}
            >
              ${this.menuButtonIcon === "menu" ? html`<obi-menu-iec></obi-menu-iec>` : html`<obi-home></obi-home>`}
            </obc-icon-button>
          </div>`
        );
      }
      if (this.showAppIcon) {
        leftGroup.push(
          html`<div class="app-icon"><slot name="app-icon"></slot></div>`
        );
      }
      leftGroup.push(html`<div class="title">${this.appTitle}</div>`);
      leftGroup.push(html`<div class="page-name">${this.pageName}</div>`);
      leftGroup.push(html`<slot name="command-button"></slot>`);
    }
    const breakpointMoreButton = Math.max(
      this.appButtonBreakpointPx,
      this.dimmingButtonBreakpointPx
    );
    return html`
      <style>
                @media (max-width: ${breakpointMoreButton}px) {
                  .left-more-button {
                    display: revert !important;
        import { customElement } from '../../decorator.js';
                  }

                  .group.left > * {
                    margin-right: 4px;
                    margin-left: 4px;
                  }
                }

                @media (max-width: ${this.appButtonBreakpointPx}px) {
                  .apps-button {
                    display: none;
                  }
                }

                @media (max-width: ${this.dimmingButtonBreakpointPx}px) {
                  .dimming-button {
                    display: none;
                  }
                }

                @media (max-width: ${this.appTitleBreakpointPx}px) {
                  .title {
                    display: none;
                  }
                }

                @media (max-width: ${this.userButtonBreakpointPx}px) {
                  .user-button {
                    display: none;
                  }
                }

                @media (max-width: ${this.appIconBreakpointPx}px) {
                  .app-icon {
                    display: none;
                  }
                }
      </style>
      <nav
        class=${classMap({
      wrapper: true,
      inactive: this.inactive,
      settings: this.settings,
      tall: this.tall
    })}
        role="menubar"
      >
        <div class="left group">${leftGroup}</div>
        <div class="right group">
          <div class="alert-container">
            <slot name="alerts"></slot>
          </div>
          ${this.showDimmingButton && !this.inactive ? html`<obc-icon-button
                class="dimming-button"
                part="dimming-button"
                variant="flat"
                @click=${this.dimmingButtonClicked}
                ?activated=${this.dimmingButtonActivated}
              >
                <obi-palette-day-night-iec></obi-palette-day-night-iec>
              </obc-icon-button>` : null}
          ${this.showUserButton && !this.inactive ? html`<obc-icon-button
                class="user-button"
                variant="flat"
                part="user-button"
                @click=${this.userButtonClicked}
                ?activated=${this.userButtonActivated}
                ?disabled=${this.userButtonDisabled}
              >
                <obi-user></obi-user>
              </obc-icon-button>` : null}
          ${this.showAppsButton && !this.inactive ? html`<obc-icon-button
                class="apps-button"
                variant="flat"
                part="apps-button"
                @click=${this.appsButtonClicked}
                ?activated=${this.appsButtonActivated}
              >
                <obi-applications></obi-applications>
              </obc-icon-button>` : null}
          ${this.showClock ? html`<slot name="clock"></slot>` : null}
          ${!this.inactive ? html`<obc-icon-button
                class="left-more-button"
                part="left-more-button"
                variant="flat"
                @click=${this.leftMoreButtonClicked}
                ?activated=${this.leftMoreButtonActivated}
              >
                <obi-more-vertical-google></obi-more-vertical-google>
              </obc-icon-button>` : null}
        </div>
      </nav>
    `;
  }
};
ObcTopBar.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcTopBar.prototype, "appTitle", 2);
__decorateClass([
  property({ type: String })
], ObcTopBar.prototype, "pageName", 2);
__decorateClass([
  property({ type: String })
], ObcTopBar.prototype, "menuButtonIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "menuButtonActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "dimmingButtonActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "appsButtonActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "leftMoreButtonActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "userButtonActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "userButtonDisabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "tall", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "wideMenuButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showAppsButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showDimmingButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showUserButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showClock", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showDate", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "showAppIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "inactive", 2);
__decorateClass([
  property({ type: Number })
], ObcTopBar.prototype, "appButtonBreakpointPx", 2);
__decorateClass([
  property({ type: Number })
], ObcTopBar.prototype, "dimmingButtonBreakpointPx", 2);
__decorateClass([
  property({ type: Number })
], ObcTopBar.prototype, "appTitleBreakpointPx", 2);
__decorateClass([
  property({ type: Number })
], ObcTopBar.prototype, "userButtonBreakpointPx", 2);
__decorateClass([
  property({ type: Number })
], ObcTopBar.prototype, "appIconBreakpointPx", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTopBar.prototype, "settings", 2);
__decorateClass([
  property({ type: Array })
], ObcTopBar.prototype, "breadcrumbItems", 2);
ObcTopBar = __decorateClass([
  customElement("obc-top-bar")
], ObcTopBar);
export {
  ObcTopBar,
  ObcTopBarMenuButtonIcon
};
//# sourceMappingURL=top-bar.js.map
