import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import componentStyle from "./brilliance-menu.css.js";
import "../button/button.js";
import { ObcSliderVariant } from "../slider/slider.js";
import "../toggle-switch/toggle-switch.js";
import "../toggle-button-group/toggle-button-group.js";
import { ObcToggleButtonOptionVariant, ObcToggleButtonOptionType } from "../toggle-button-option/toggle-button-option.js";
import "../../icons/icon-display-brilliance-low.js";
import "../../icons/icon-display-brilliance-proposal.js";
import "../../icons/icon-palette-night.js";
import "../../icons/icon-palette-dusk.js";
import "../../icons/icon-palette-day.js";
import "../../icons/icon-palette-day-bright.js";
import "../../icons/icon-link.js";
import "../../icons/icon-chevron-double-right-google.js";
import "../../icons/icon-chevron-double-left-google.js";
import "../../icons/icon-chevron-left-google.js";
import "../../icons/icon-chevron-right-google.js";
import "../../icons/icon-screen-desk.js";
import { localized, msg } from "@lit/localize";
import { customElement } from "../../decorator.js";
import "../progress-indicator-dots/progress-indicator-dots.js";
import "../navigation-item/navigation-item.js";
import "../app-button/app-button.js";
import "../user-button/user-button.js";
import "../tabbed-card/tabbed-card.js";
import "../../icons/icon-display-brilliance-iec.js";
import "../../icons/icon-palette-day-night-iec.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 ObcPalette = /* @__PURE__ */ ((ObcPalette2) => {
  ObcPalette2["night"] = "night";
  ObcPalette2["dusk"] = "dusk";
  ObcPalette2["day"] = "day";
  ObcPalette2["bright"] = "bright";
  return ObcPalette2;
})(ObcPalette || {});
var ObcBrillianceMenuVariant = /* @__PURE__ */ ((ObcBrillianceMenuVariant2) => {
  ObcBrillianceMenuVariant2["normal"] = "normal";
  ObcBrillianceMenuVariant2["compact"] = "compact";
  ObcBrillianceMenuVariant2["tabbed"] = "tabbed";
  return ObcBrillianceMenuVariant2;
})(ObcBrillianceMenuVariant || {});
var ObcBrillianceInputVariant = /* @__PURE__ */ ((ObcBrillianceInputVariant2) => {
  ObcBrillianceInputVariant2["buttons"] = "buttons";
  ObcBrillianceInputVariant2["slider"] = "slider";
  return ObcBrillianceInputVariant2;
})(ObcBrillianceInputVariant || {});
let ObcBrillianceMenu = class extends LitElement {
  constructor() {
    super(...arguments);
    this.palette = "day";
    this.brightness = 50;
    this.showLinkBrightness = false;
    this.showLinkPalette = false;
    this.showBrightness = true;
    this.showPalette = true;
    this.showNightPalette = true;
    this.showDuskPalette = true;
    this.showDayPalette = true;
    this.showBrightPalette = true;
    this.variant = "normal";
    this.brightnessUnit = "%";
    this.brightnessMax = 100;
    this.brightnessMinorStep = 5;
    this.brightnessMajorStep = 25;
    this.brightnessInputVariant = "buttons";
    this.showScreenControlLink = false;
  }
  willUpdate(_changed) {
    if (this.showPalette) {
      const available = this.availablePalettes;
      if (available.length > 0 && !available.includes(this.palette)) {
        this.palette = available[0];
        this.dispatchEvent(
          new CustomEvent("palette-changed", {
            detail: { value: this.palette }
          })
        );
      }
    }
  }
  /**
   * Handles palette selection changes and emits `palette-changed`.
   * @fires palette-changed
   * @param {CustomEvent} event
   */
  onPaletteChanged(event) {
    this.palette = event.detail.value;
    this.dispatchEvent(
      new CustomEvent("palette-changed", {
        detail: { value: event.detail.value }
      })
    );
  }
  /**
   * Handles brightness slider changes and emits `brightness-changed`.
   * @fires brightness-changed
   * @param {CustomEvent} event
   */
  handleBrightnessChanged(event) {
    this.brightness = event.detail;
    this.dispatchEvent(
      new CustomEvent("brightness-changed", {
        detail: { value: event.detail }
      })
    );
  }
  increaseBrightness(step) {
    this.brightness = Math.max(
      0,
      Math.min(this.brightness + step, this.brightnessMax)
    );
    this.dispatchEvent(
      new CustomEvent("brightness-changed", {
        detail: { value: this.brightness }
      })
    );
  }
  get canIncreaseBrightness() {
    return this.brightness < this.brightnessMax;
  }
  get canDecreaseBrightness() {
    return this.brightness > 0;
  }
  /**
   * Handles link palette changes and emits `link-palette-changed`.
   * @fires link-palette-changed
   * @param {CustomEvent} event
   */
  onLinkPaletteChanged(event) {
    this.dispatchEvent(
      new CustomEvent("link-palette-changed", {
        detail: { value: event.target.checked }
      })
    );
  }
  /**
   * Handles link brightness changes and emits `link-brightness-changed`.
   * @fires link-brightness-changed
   * @param {CustomEvent} event
   */
  onLinkBrightnessChanged(event) {
    this.dispatchEvent(
      new CustomEvent("link-brightness-changed", {
        detail: { value: event.target.checked }
      })
    );
  }
  get availablePalettes() {
    const palettes = [];
    if (this.showNightPalette) palettes.push(
      "night"
      /* night */
    );
    if (this.showDuskPalette) palettes.push(
      "dusk"
      /* dusk */
    );
    if (this.showDayPalette) palettes.push(
      "day"
      /* day */
    );
    if (this.showBrightPalette) palettes.push(
      "bright"
      /* bright */
    );
    return palettes;
  }
  get canIncreasePalette() {
    const palettes = this.availablePalettes;
    const idx = palettes.indexOf(this.palette);
    return idx >= 0 && idx < palettes.length - 1;
  }
  get canDecreasePalette() {
    const palettes = this.availablePalettes;
    const idx = palettes.indexOf(this.palette);
    return idx > 0;
  }
  nextPalette() {
    if (this.canIncreasePalette) {
      const palettes = this.availablePalettes;
      const idx = palettes.indexOf(this.palette);
      this.palette = palettes[idx + 1];
      this.dispatchEvent(
        new CustomEvent("palette-changed", {
          detail: { value: this.palette }
        })
      );
    }
  }
  previousPalette() {
    if (this.canDecreasePalette) {
      const palettes = this.availablePalettes;
      const idx = palettes.indexOf(this.palette);
      this.palette = palettes[idx - 1];
      this.dispatchEvent(
        new CustomEvent("palette-changed", {
          detail: { value: this.palette }
        })
      );
    }
  }
  renderBrightness() {
    const title = this.variant === "tabbed" ? nothing : html`<div class="title-container">
            <h3>${msg("Brilliance")}</h3>
          </div>`;
    const valueLength = this.brightness.toString().length + 0.5 * this.brightnessUnit.length;
    return html`${title}
      <div class="content-container brilliance">
        ${this.variant === "compact" ? html` <obc-slider
              value=${this.brightness}
              @value=${this.handleBrightnessChanged}
              min="0"
              max=${this.brightnessMax}
              variant=${ObcSliderVariant.Normal}
              haslefticon
              hasrighticon
            >
              <obi-display-brilliance-low
                slot="icon-left"
              ></obi-display-brilliance-low>
              <obi-display-brilliance-proposal
                slot="icon-right"
              ></obi-display-brilliance-proposal>
            </obc-slider>` : html`
              <div class="value-container">
                <div class="value-label-container">
                  <obi-display-brilliance-proposal
                    class="icon"
                  ></obi-display-brilliance-proposal>
                  <div class="label-container" style="width: ${valueLength}ch">
                    <div class="value">${this.brightness.toFixed(0)}</div>
                    <div class="unit">${this.brightnessUnit}</div>
                  </div>
                </div>
                <div class="value-slider-container">
                  ${this.brightnessInputVariant === "buttons" ? html`
                        <obc-slider
                          value=${this.brightness}
                          variant=${ObcSliderVariant.NoInput}
                          min="0"
                          max=${this.brightnessMax}
                        ></obc-slider>
                      ` : html`
                        <obc-slider
                          value=${this.brightness}
                          variant=${ObcSliderVariant.Enhanced}
                          @value=${this.handleBrightnessChanged}
                          min="0"
                          max=${this.brightnessMax}
                        ></obc-slider>
                      `}
                </div>
              </div>
              ${this.brightnessInputVariant === "buttons" ? html`
                    <div class="icon-button-container">
                      <obc-button
                        segmentPosition="start"
                        fullWidth
                        ?disabled=${!this.canDecreaseBrightness}
                        class=${this.canDecreaseBrightness ? "" : "disabled"}
                        @click=${() => this.increaseBrightness(-this.brightnessMajorStep)}
                      >
                        <obi-chevron-double-left-google
                          class="btn-icon"
                        ></obi-chevron-double-left-google>
                      </obc-button>
                      <obc-button
                        segmentPosition="middle"
                        fullWidth
                        ?disabled=${!this.canDecreaseBrightness}
                        class=${this.canDecreaseBrightness ? "" : "disabled"}
                        @click=${() => this.increaseBrightness(-this.brightnessMinorStep)}
                      >
                        <obi-chevron-left-google
                          class="btn-icon"
                        ></obi-chevron-left-google>
                      </obc-button>
                      <obc-button
                        segmentPosition="middle"
                        fullWidth
                        ?disabled=${!this.canIncreaseBrightness}
                        class=${this.canIncreaseBrightness ? "" : "disabled"}
                        @click=${() => this.increaseBrightness(this.brightnessMinorStep)}
                      >
                        <obi-chevron-right-google
                          class="btn-icon"
                        ></obi-chevron-right-google>
                      </obc-button>
                      <obc-button
                        segmentPosition="end"
                        fullWidth
                        ?disabled=${!this.canIncreaseBrightness}
                        class=${this.canIncreaseBrightness ? "" : "disabled"}
                        @click=${() => this.increaseBrightness(this.brightnessMajorStep)}
                      >
                        <obi-chevron-double-right-google
                          class="btn-icon"
                        ></obi-chevron-double-right-google>
                      </obc-button>
                    </div>
                  ` : nothing}
            `}
        ${this.showLinkBrightness ? html`<obc-toggle-switch
              .label="${msg("Link")}"
              hasicon
              @input=${this.onLinkBrightnessChanged}
            >
              <obi-link slot="icon"></obi-link>
            </obc-toggle-switch>` : nothing}
      </div>`;
  }
  get effectivePalette() {
    const palettes = this.availablePalettes;
    return palettes.includes(this.palette) ? this.palette : palettes[0];
  }
  get paletteIcon() {
    if (this.effectivePalette === "night") {
      return html`<obi-palette-night class="icon"></obi-palette-night>`;
    } else if (this.effectivePalette === "dusk") {
      return html`<obi-palette-dusk class="icon"></obi-palette-dusk>`;
    } else if (this.effectivePalette === "day") {
      return html`<obi-palette-day class="icon"></obi-palette-day>`;
    } else if (this.effectivePalette === "bright") {
      return html`<obi-palette-day-bright
        class="icon"
      ></obi-palette-day-bright>`;
    } else {
      return nothing;
    }
  }
  paletteOptions() {
    const out = [];
    if (this.showNightPalette)
      out.push(
        html`<obc-toggle-button-option value="night" type="icon">
          <obi-palette-night slot="icon"></obi-palette-night>
        </obc-toggle-button-option>`
      );
    if (this.showDuskPalette)
      out.push(
        html`<obc-toggle-button-option value="dusk" type="icon">
          <obi-palette-dusk slot="icon"></obi-palette-dusk>
        </obc-toggle-button-option>`
      );
    if (this.showDayPalette)
      out.push(
        html`<obc-toggle-button-option value="day" type="icon">
          <obi-palette-day slot="icon"></obi-palette-day>
        </obc-toggle-button-option>`
      );
    if (this.showBrightPalette)
      out.push(
        html`<obc-toggle-button-option value="bright" type="icon">
          <obi-palette-day-bright slot="icon"></obi-palette-day-bright>
        </obc-toggle-button-option>`
      );
    return out;
  }
  renderPalette() {
    const palettes = this.availablePalettes;
    if (palettes.length === 0) return nothing;
    const paletteNames = {
      [
        "night"
        /* night */
      ]: msg("Night"),
      [
        "dusk"
        /* dusk */
      ]: msg("Dusk"),
      [
        "day"
        /* day */
      ]: msg("Day"),
      [
        "bright"
        /* bright */
      ]: msg("Bright")
    };
    const currentPaletteName = paletteNames[this.effectivePalette];
    const valueLength = currentPaletteName.length;
    const index = palettes.indexOf(this.effectivePalette);
    const nextIndex = Math.min(index + 1, palettes.length - 1);
    const previousIndex = Math.max(index - 1, 0);
    const nextPalette = paletteNames[palettes[nextIndex]];
    const previousPalette = paletteNames[palettes[previousIndex]];
    return html`
      ${this.variant === "tabbed" ? nothing : html`
            <div class="title-container">
              <h3>${msg("Day")}/${msg("Night")}</h3>
            </div>
          `}
      <div
        class="content-container palette ${this.showLinkPalette ? "with-link" : "without-link"}"
      >
        ${this.variant === "compact" ? html` <obc-toggle-button-group
              value=${this.effectivePalette}
              @value=${this.onPaletteChanged}
              variant=${ObcToggleButtonOptionVariant.regular}
              type=${ObcToggleButtonOptionType.icon}
            >
              ${this.paletteOptions()}
            </obc-toggle-button-group>` : html`
              <div class="value-container">
                <div class="value-label-container">
                  ${this.paletteIcon}
                  <div class="label-container" style="width: ${valueLength}ch">
                    <div class="value">${currentPaletteName}</div>
                  </div>
                </div>
                <obc-progress-indicator-dots
                  .totalSteps=${palettes.length}
                  .currentStep=${index + 1}
                ></obc-progress-indicator-dots>
              </div>
              <div class="icon-button-container">
                <obc-button
                  segmentPosition="start"
                  fullWidth
                  showLeadingIcon
                  ?disabled=${!this.canDecreasePalette}
                  class=${this.canDecreasePalette ? "" : "disabled"}
                  @click=${() => this.previousPalette()}
                >
                  ${previousPalette}
                  <obi-chevron-left-google
                    slot="leading-icon"
                  ></obi-chevron-left-google>
                </obc-button>

                <obc-button
                  segmentPosition="end"
                  fullWidth
                  showTrailingIcon
                  ?disabled=${!this.canIncreasePalette}
                  class=${this.canIncreasePalette ? "" : "disabled"}
                  @click=${() => this.nextPalette()}
                >
                  ${nextPalette}
                  <obi-chevron-right-google
                    slot="trailing-icon"
                  ></obi-chevron-right-google>
                </obc-button>
              </div>
            `}
        ${this.showLinkPalette ? html`<obc-toggle-switch
              .label="${msg("Link")}"
              hasicon
              @input=${this.onLinkPaletteChanged}
            >
              <obi-link slot="icon"></obi-link>
            </obc-toggle-switch>` : nothing}
      </div>
    `;
  }
  renderScreenControlLink() {
    if (!this.showScreenControlLink) {
      return nothing;
    }
    return html`
      <div class="footer">
        <obc-navigation-item
          .label="${msg("Screen Control")}"
          @click=${() => this.handleScreenControlLinkClicked()}
          hasicon
        >
          <obc-user-button slot="icon" static variant="icon" styleType="normal">
            <obi-screen-desk slot="icon"></obi-screen-desk>
          </obc-user-button>
        </obc-navigation-item>
      </div>
    `;
  }
  render() {
    if (this.variant === "tabbed") {
      return html`<obc-tabbed-card class="card" nTabs=${2} hasTabIcons>
        <span slot="tab-title-0">${msg("Brilliance")}</span>
        <obi-display-brilliance-iec
          slot="tab-icon-0"
        ></obi-display-brilliance-iec>
        <span slot="tab-title-1">${msg("Day")}/${msg("Night")}</span>
        <obi-palette-day-night-iec
          slot="tab-icon-1"
        ></obi-palette-day-night-iec>
        <div slot="tab-content-0">
          ${this.renderBrightness()} ${this.renderScreenControlLink()}
        </div>
        <div slot="tab-content-1">
          ${this.renderPalette()} ${this.renderScreenControlLink()}
        </div>
      </obc-tabbed-card>`;
    } else {
      return html`
        <div class="card ${this.variant}">
          ${this.showBrightness ? this.renderBrightness() : nothing}
          ${this.showBrightness && this.showPalette ? html`<div class="divider"></div>` : nothing}
          ${this.showPalette ? this.renderPalette() : nothing}
          ${this.renderScreenControlLink()}
        </div>
      `;
    }
  }
  handleScreenControlLinkClicked() {
    this.dispatchEvent(new CustomEvent("screen-control-link-clicked"));
  }
};
ObcBrillianceMenu.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcBrillianceMenu.prototype, "palette", 2);
__decorateClass([
  property({ type: Number })
], ObcBrillianceMenu.prototype, "brightness", 2);
__decorateClass([
  property({ type: Boolean })
], ObcBrillianceMenu.prototype, "showLinkBrightness", 2);
__decorateClass([
  property({ type: Boolean })
], ObcBrillianceMenu.prototype, "showLinkPalette", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showBrightness", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showPalette", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showNightPalette", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showDuskPalette", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showDayPalette", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcBrillianceMenu.prototype, "showBrightPalette", 2);
__decorateClass([
  property({ type: String })
], ObcBrillianceMenu.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], ObcBrillianceMenu.prototype, "brightnessUnit", 2);
__decorateClass([
  property({ type: Number })
], ObcBrillianceMenu.prototype, "brightnessMax", 2);
__decorateClass([
  property({ type: Number })
], ObcBrillianceMenu.prototype, "brightnessMinorStep", 2);
__decorateClass([
  property({ type: Number })
], ObcBrillianceMenu.prototype, "brightnessMajorStep", 2);
__decorateClass([
  property({ type: String })
], ObcBrillianceMenu.prototype, "brightnessInputVariant", 2);
__decorateClass([
  property({ type: Boolean })
], ObcBrillianceMenu.prototype, "showScreenControlLink", 2);
ObcBrillianceMenu = __decorateClass([
  localized(),
  customElement("obc-brilliance-menu")
], ObcBrillianceMenu);
export {
  ObcBrillianceInputVariant,
  ObcBrillianceMenu,
  ObcBrillianceMenuVariant,
  ObcPalette
};
//# sourceMappingURL=brilliance-menu.js.map
