import { unsafeCSS, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import { customElement } from "../../decorator.js";
import { ObcAbstractPoiObject } from "../building-blocks/poi-object/abstract-poi-object.js";
import { ObcPoiObjectState, ObcPoiObjectType, ObcPoiObjectStyle } from "../building-blocks/poi-object/poi-object.js";
import componentStyle from "./poi-object-aton.css.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 ObcPoiObjectAtonType = /* @__PURE__ */ ((ObcPoiObjectAtonType2) => {
  ObcPoiObjectAtonType2["Indicator"] = "indicator";
  ObcPoiObjectAtonType2["Regular"] = "regular";
  ObcPoiObjectAtonType2["Large"] = "large";
  ObcPoiObjectAtonType2["AtoN"] = "aton";
  ObcPoiObjectAtonType2["NUp"] = "n-up";
  ObcPoiObjectAtonType2["NUpLarge"] = "n-up-large";
  return ObcPoiObjectAtonType2;
})(ObcPoiObjectAtonType || {});
var ObcPoiObjectAtonStyle = /* @__PURE__ */ ((ObcPoiObjectAtonStyle2) => {
  ObcPoiObjectAtonStyle2["Regular"] = "regular";
  ObcPoiObjectAtonStyle2["Green"] = "green";
  ObcPoiObjectAtonStyle2["Red"] = "red";
  ObcPoiObjectAtonStyle2["Yellow"] = "yellow";
  return ObcPoiObjectAtonStyle2;
})(ObcPoiObjectAtonStyle || {});
var ObcPoiObjectAtonState = /* @__PURE__ */ ((ObcPoiObjectAtonState2) => {
  ObcPoiObjectAtonState2["Unchecked"] = "unchecked";
  ObcPoiObjectAtonState2["Checked"] = "checked";
  ObcPoiObjectAtonState2["StaticUnchecked"] = "static-unchecked";
  ObcPoiObjectAtonState2["StaticChecked"] = "static-checked";
  ObcPoiObjectAtonState2["Activated"] = "activated";
  ObcPoiObjectAtonState2["Overlapped"] = "overlapped";
  ObcPoiObjectAtonState2["Caution"] = "caution";
  ObcPoiObjectAtonState2["Warning"] = "warning";
  ObcPoiObjectAtonState2["Alarm"] = "alarm";
  return ObcPoiObjectAtonState2;
})(ObcPoiObjectAtonState || {});
const ATON_COLORS = {
  green: {
    primary: "var(--overlay-navigation-green-primary-color)",
    secondary: "var(--overlay-navigation-green-secondary-color)",
    onPrimary: "var(--overlay-navigation-green-on-primary-color, #005f43)"
  },
  red: {
    primary: "var(--overlay-navigation-red-primary-color)",
    secondary: "var(--overlay-navigation-red-secondary-color)",
    onPrimary: "var(--overlay-navigation-red-on-primary-color, #863d3c)"
  },
  yellow: {
    primary: "var(--overlay-navigation-yellow-primary-color)",
    secondary: "var(--overlay-navigation-yellow-secondary-color)",
    onPrimary: "var(--overlay-navigation-yellow-on-primary-color, #635200)"
  }
};
let ObcPoiObjectAton = class extends ObcAbstractPoiObject {
  constructor() {
    super(...arguments);
    this.type = "regular";
    this.objectStyle = "regular";
  }
  get isAtonType() {
    return this.type === "aton";
  }
  get isOverlapped() {
    return this.state === ObcPoiObjectState.Overlapped;
  }
  get isInteractive() {
    return this.interactive && !this.isOverlapped;
  }
  get isIndicator() {
    return this.type === "indicator";
  }
  get isStatic() {
    return this.state === ObcPoiObjectState.StaticUnchecked || this.state === ObcPoiObjectState.StaticChecked;
  }
  get isAlert() {
    return this.state === ObcPoiObjectState.Caution || this.state === ObcPoiObjectState.Warning || this.state === ObcPoiObjectState.Alarm;
  }
  get usesAlertCircle() {
    return this.isAtonType && this.isAlert;
  }
  handleKeyDown(e) {
    if (!this.isInteractive) return;
    if (e.target !== e.currentTarget) return;
    if (e.key === " ") {
      e.preventDefault();
    } else if (e.key === "Enter" && !e.repeat) {
      e.preventDefault();
      this.click();
    }
  }
  handleKeyUp(e) {
    if (!this.isInteractive) return;
    if (e.target !== e.currentTarget) return;
    if (e.key === " ") {
      e.preventDefault();
      this.click();
    }
  }
  get innerState() {
    if (this.isIndicator && this.isAlert) {
      return ObcPoiObjectState.Activated;
    }
    return this.state;
  }
  get colorStyleVars() {
    const tokens = ATON_COLORS[this.objectStyle];
    if (!tokens) return {};
    const isIndicatorNonStatic = this.isIndicator && !this.isStatic;
    return {
      "--overlay-container-background-color": tokens.primary,
      "--overlay-border-outline-color": tokens.secondary,
      "--normal-enabled-background-color": tokens.primary,
      "--normal-enabled-border-color": tokens.secondary,
      "--flat-enabled-background-color": tokens.primary,
      "--flat-enabled-border-color": tokens.secondary,
      "--flat-hover-background-color": `color-mix(in srgb, ${tokens.primary} 85%, white)`,
      "--flat-pressed-background-color": `color-mix(in srgb, ${tokens.primary} 75%, white)`,
      "--element-neutral-color": isIndicatorNonStatic ? tokens.primary : tokens.onPrimary,
      "--element-active-color": isIndicatorNonStatic ? tokens.primary : tokens.onPrimary,
      "--indicator-stroke-color": isIndicatorNonStatic ? tokens.onPrimary : tokens.primary
    };
  }
  get baseType() {
    switch (this.type) {
      case "indicator":
        return ObcPoiObjectType.Indicator;
      case "regular":
        return ObcPoiObjectType.Regular;
      case "large":
        return ObcPoiObjectType.Large;
      case "n-up":
        return ObcPoiObjectType.NUp;
      case "n-up-large":
        return ObcPoiObjectType.NUpLarge;
      default:
        return ObcPoiObjectType.Regular;
    }
  }
  renderAtonDiamond() {
    return html`
      <div class="aton-diamond-frame">
        <div class="aton-diamond-background" part="background-frame"></div>
        <div class="aton-icon-container">
          <slot></slot>
        </div>
      </div>
    `;
  }
  renderBasePoiObject(styleVars = this.colorStyleVars) {
    return html`
      <obc-poi-object
        exportparts="background-frame"
        style=${styleMap(styleVars)}
        .type=${this.baseType}
        .objectStyle=${ObcPoiObjectStyle.Regular}
        .state=${this.innerState}
        ?interactive=${this.interactive}
      >
        <slot></slot>
      </obc-poi-object>
    `;
  }
  render() {
    const wrapperClasses = {
      "aton-wrapper": true,
      [`type-${this.type}`]: true,
      [`style-${this.objectStyle}`]: true,
      [`state-${this.state}`]: true,
      interactive: this.isInteractive
    };
    if (this.isAtonType && !this.usesAlertCircle) {
      return html`
        <div
          class=${classMap(wrapperClasses)}
          role=${this.isInteractive ? "button" : nothing}
          tabindex=${this.isInteractive ? "0" : nothing}
          @keydown=${this.handleKeyDown}
          @keyup=${this.handleKeyUp}
        >
          ${this.renderAtonDiamond()}
        </div>
      `;
    }
    return html`
      <div class=${classMap(wrapperClasses)}>
        ${this.renderBasePoiObject(
      this.usesAlertCircle ? {} : this.colorStyleVars
    )}
      </div>
    `;
  }
};
ObcPoiObjectAton.styles = [
  ...ObcAbstractPoiObject.styles,
  unsafeCSS(componentStyle)
];
__decorateClass([
  property({ type: String })
], ObcPoiObjectAton.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcPoiObjectAton.prototype, "objectStyle", 2);
ObcPoiObjectAton = __decorateClass([
  customElement("obc-poi-object-aton")
], ObcPoiObjectAton);
export {
  ObcPoiObjectAton,
  ObcPoiObjectAtonState,
  ObcPoiObjectAtonStyle,
  ObcPoiObjectAtonType
};
//# sourceMappingURL=poi-object-aton.js.map
