import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import componentStyle from "./poi-card.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import { ObcPoiCardHeaderVariant } from "../poi-card-header/poi-card-header.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 PointerDirection = /* @__PURE__ */ ((PointerDirection2) => {
  PointerDirection2["None"] = "none";
  PointerDirection2["Top"] = "top";
  PointerDirection2["Bottom"] = "bottom";
  PointerDirection2["Left"] = "left";
  PointerDirection2["Right"] = "right";
  return PointerDirection2;
})(PointerDirection || {});
let ObcPoiCard = class extends LitElement {
  constructor() {
    super(...arguments);
    this.pointerDirection = "none";
    this.fixedSize = false;
    this.showHeader = true;
    this.headerVariant = ObcPoiCardHeaderVariant.Condensed;
    this.index = "1";
    this.cardTitle = "";
    this.description = "";
    this.source = "";
    this.timestamp = "";
    this.hasLeadingIcon = false;
    this.hasCloseButton = false;
    this.interactive = false;
    this.hasAlert = false;
  }
  handleCardClick() {
    if (!this.interactive) return;
    this.dispatchEvent(
      new CustomEvent("card-click", {
        detail: { index: this.index },
        bubbles: true,
        composed: true
      })
    );
  }
  handleKeyDown(e) {
    if (!this.interactive) return;
    if (e.target !== e.currentTarget) return;
    if (e.key === " ") {
      e.preventDefault();
    } else if (e.key === "Enter" && !e.repeat) {
      e.preventDefault();
      this.handleCardClick();
    }
  }
  handleKeyUp(e) {
    if (!this.interactive) return;
    if (e.target !== e.currentTarget) return;
    if (e.key === " ") {
      e.preventDefault();
      this.handleCardClick();
    }
  }
  renderPointerSvg(direction) {
    const paths = {
      top: "M6 0L12 6H0L6 0Z",
      bottom: "M6 6L0 0H12L6 6Z",
      left: "M0 6L6 0V12L0 6Z",
      right: "M6 6L0 0V12L6 6Z"
    };
    const isVertical = direction === "top" || direction === "bottom";
    const width = isVertical ? 12 : 6;
    const height = isVertical ? 6 : 12;
    return html`
      <svg
        width="${width}"
        height="${height}"
        viewBox="0 0 ${width} ${height}"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="${paths[direction]}"
          fill="var(--overlay-border-outline-color)"
        />
      </svg>
    `;
  }
  renderTopPointer() {
    if (this.pointerDirection !== "top") return nothing;
    return html`
      <div class="pointer-container top">${this.renderPointerSvg("top")}</div>
    `;
  }
  renderBottomPointer() {
    if (this.pointerDirection !== "bottom") return nothing;
    return html`
      <div class="pointer-container bottom">
        ${this.renderPointerSvg("bottom")}
      </div>
    `;
  }
  renderLeftPointer() {
    if (this.pointerDirection !== "left") return nothing;
    return html`
      <div class="pointer-container left">${this.renderPointerSvg("left")}</div>
    `;
  }
  renderRightPointer() {
    if (this.pointerDirection !== "right") return nothing;
    return html`
      <div class="pointer-container right">
        ${this.renderPointerSvg("right")}
      </div>
    `;
  }
  renderHeader() {
    if (!this.showHeader) return nothing;
    return html`
      <obc-poi-card-header
        variant=${this.headerVariant}
        index=${this.index}
        cardTitle=${this.cardTitle}
        description=${this.description}
        source=${this.source}
        timestamp=${this.timestamp}
        ?hasLeadingIcon=${this.hasLeadingIcon}
        ?hasCloseButton=${this.hasCloseButton}
      >
        <slot name="leading-icon" slot="leading-icon"></slot>
        <slot name="poi-icon" slot="poi-icon"></slot>
      </obc-poi-card-header>
    `;
  }
  renderAlertLayer() {
    if (!this.interactive || !this.hasAlert) return nothing;
    return html`
      <div class="alert-layer">
        <div class="ring-outer"></div>
        <div class="ring-middle alert"></div>
        <div class="ring-inner"></div>
      </div>
    `;
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      "hug-content": !this.fixedSize,
      "fixed-size": this.fixedSize,
      interactive: this.interactive
    })}
      >
        ${this.renderTopPointer()}
        <div class="center">
          ${this.renderLeftPointer()}
          <div
            class="content-box"
            role=${this.interactive ? "button" : nothing}
            tabindex=${this.interactive ? "0" : nothing}
            aria-disabled=${this.interactive ? "false" : nothing}
            @click=${this.handleCardClick}
            @keydown=${this.handleKeyDown}
            @keyup=${this.handleKeyUp}
          >
            ${this.renderHeader()}
            <div class="content">
              <slot></slot>
            </div>
            ${this.renderAlertLayer()}
          </div>
          ${this.renderRightPointer()}
        </div>
        ${this.renderBottomPointer()}
      </div>
    `;
  }
};
ObcPoiCard.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "pointerDirection", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCard.prototype, "fixedSize", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcPoiCard.prototype, "showHeader", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "headerVariant", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "index", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "cardTitle", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "source", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCard.prototype, "timestamp", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCard.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCard.prototype, "hasCloseButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCard.prototype, "interactive", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCard.prototype, "hasAlert", 2);
ObcPoiCard = __decorateClass([
  customElement("obc-poi-card")
], ObcPoiCard);
export {
  ObcPoiCard,
  ObcPoiCardHeaderVariant,
  PointerDirection
};
//# sourceMappingURL=poi-card.js.map
