import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import componentStyle from "./poi-object.css.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 ObcPoiObjectType = /* @__PURE__ */ ((ObcPoiObjectType2) => {
  ObcPoiObjectType2["Indicator"] = "indicator";
  ObcPoiObjectType2["Regular"] = "regular";
  ObcPoiObjectType2["Large"] = "large";
  ObcPoiObjectType2["NUp"] = "n-up";
  ObcPoiObjectType2["NUpLarge"] = "n-up-large";
  return ObcPoiObjectType2;
})(ObcPoiObjectType || {});
var ObcPoiObjectStyle = /* @__PURE__ */ ((ObcPoiObjectStyle2) => {
  ObcPoiObjectStyle2["Regular"] = "regular";
  ObcPoiObjectStyle2["Categorical"] = "categorical";
  ObcPoiObjectStyle2["Enhanced"] = "enhanced";
  return ObcPoiObjectStyle2;
})(ObcPoiObjectStyle || {});
var ObcPoiObjectState = /* @__PURE__ */ ((ObcPoiObjectState2) => {
  ObcPoiObjectState2["Unchecked"] = "unchecked";
  ObcPoiObjectState2["Checked"] = "checked";
  ObcPoiObjectState2["StaticUnchecked"] = "static-unchecked";
  ObcPoiObjectState2["StaticChecked"] = "static-checked";
  ObcPoiObjectState2["Activated"] = "activated";
  ObcPoiObjectState2["Overlapped"] = "overlapped";
  ObcPoiObjectState2["Caution"] = "caution";
  ObcPoiObjectState2["Warning"] = "warning";
  ObcPoiObjectState2["Alarm"] = "alarm";
  return ObcPoiObjectState2;
})(ObcPoiObjectState || {});
let ObcPoiObject = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "regular";
    this.objectStyle = "regular";
    this.state = "unchecked";
    this.interactive = false;
    this.hasPlaceholderIcon = false;
  }
  get isChecked() {
    return this.state === "checked" || this.state === "static-checked";
  }
  get isStatic() {
    return this.state === "static-unchecked" || this.state === "static-checked";
  }
  get isActivated() {
    return this.state === "activated";
  }
  get isOverlapped() {
    return this.state === "overlapped";
  }
  get isInteractive() {
    return this.interactive && !this.isOverlapped;
  }
  get isSquare() {
    return this.type === "n-up" || this.type === "n-up-large";
  }
  get isLargeSize() {
    return this.type === "large" || this.type === "n-up-large";
  }
  get isIndicator() {
    return this.type === "indicator";
  }
  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();
    }
  }
  handleSlotChange(e) {
    const slot = e.target;
    const hasPlaceholderIcon = slot.assignedElements({ flatten: true }).some((element) => element.tagName.toLowerCase() === "obi-placeholder");
    if (hasPlaceholderIcon !== this.hasPlaceholderIcon) {
      this.hasPlaceholderIcon = hasPlaceholderIcon;
    }
  }
  render() {
    const classes = {
      wrapper: true,
      [`type-${this.type}`]: true,
      [`style-${this.objectStyle}`]: true,
      [`state-${this.state}`]: true,
      "is-static": this.isStatic,
      "is-checked": this.isChecked,
      "is-activated": this.isActivated,
      "is-overlapped": this.isOverlapped,
      "is-square": this.isSquare,
      "is-large": this.isLargeSize,
      "is-indicator": this.isIndicator,
      "has-placeholder-icon": this.hasPlaceholderIcon,
      interactive: this.isInteractive
    };
    return html`
      <div
        class=${classMap(classes)}
        role=${this.isInteractive ? "button" : nothing}
        tabindex=${this.isInteractive ? "0" : nothing}
        @keydown=${this.handleKeyDown}
        @keyup=${this.handleKeyUp}
      >
        ${this.isActivated ? html`<div class="activated-frame" part="activated-frame"></div>` : nothing}
        ${!this.isIndicator || this.isOverlapped || this.isInteractive ? html`<div class="background-frame" part="background-frame"></div>` : nothing}

        <div class="icon-container" part="icon-container">
          ${this.isIndicator && this.hasPlaceholderIcon ? html`<svg
                class="indicator-placeholder-fill"
                viewBox="0 0 24 24"
                aria-hidden="true"
                focusable="false"
              >
                <path d="M12 3L3 12L12 21L21 12L12 3Z"></path>
              </svg>` : nothing}
          <slot @slotchange=${this.handleSlotChange}></slot>
        </div>
      </div>
    `;
  }
};
ObcPoiObject.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String, reflect: true })
], ObcPoiObject.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcPoiObject.prototype, "objectStyle", 2);
__decorateClass([
  property({ type: String })
], ObcPoiObject.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiObject.prototype, "interactive", 2);
__decorateClass([
  state()
], ObcPoiObject.prototype, "hasPlaceholderIcon", 2);
ObcPoiObject = __decorateClass([
  customElement("obc-poi-object")
], ObcPoiObject);
export {
  ObcPoiObject,
  ObcPoiObjectState,
  ObcPoiObjectStyle,
  ObcPoiObjectType
};
//# sourceMappingURL=poi-object.js.map
