import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import componentStyle from "./poi-card-header.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import "../../components/icon-button/icon-button.js";
import "../../icons/icon-close-google.js";
import "../poi-object-vessel/poi-object-vessel.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 ObcPoiCardHeaderVariant = /* @__PURE__ */ ((ObcPoiCardHeaderVariant2) => {
  ObcPoiCardHeaderVariant2["Tag"] = "tag";
  ObcPoiCardHeaderVariant2["Condensed"] = "condensed";
  ObcPoiCardHeaderVariant2["Regular"] = "regular";
  ObcPoiCardHeaderVariant2["Detailed"] = "detailed";
  return ObcPoiCardHeaderVariant2;
})(ObcPoiCardHeaderVariant || {});
let ObcPoiCardHeader = class extends LitElement {
  constructor() {
    super(...arguments);
    this.variant = "regular";
    this.index = "1";
    this.cardTitle = "";
    this.description = "";
    this.source = "";
    this.timestamp = "";
    this.hasLeadingIcon = false;
    this.hasCloseButton = false;
  }
  get hasSource() {
    return this.source !== "";
  }
  handleCloseClick(e) {
    e.stopPropagation();
    this.dispatchEvent(
      new CustomEvent("close-click", {
        bubbles: true,
        composed: true
      })
    );
  }
  renderIndexBadge() {
    const isTag = this.variant === "tag";
    return html`
      <div class=${classMap({ "index-badge": true, "tag-style": isTag })}>
        <span class="index-text">${this.index}</span>
      </div>
    `;
  }
  renderSourceBadge() {
    if (!this.hasSource) return nothing;
    return html`
      <div class="source-badge">
        <span class="source-text">${this.source}</span>
      </div>
    `;
  }
  renderTagVariant() {
    return html` <div class="tag-container">${this.renderIndexBadge()}</div> `;
  }
  renderCondensedVariant() {
    return html`
      <div class="id-container">${this.renderIndexBadge()}</div>
      <div class="header-container">
        <span class="title condensed-title">${this.cardTitle}</span>
      </div>
      ${this.renderSourceBadge()}
    `;
  }
  renderRegularVariant() {
    return html`
      <div class="id-container">${this.renderIndexBadge()}</div>
      <div class="header-container">
        ${this.hasLeadingIcon ? html`<div class="icon-container">
              <slot class="leading-icon" name="leading-icon"></slot>
            </div>` : nothing}
        <span class="title">${this.cardTitle}</span>
      </div>
      ${this.renderSourceBadge()}
    `;
  }
  renderDetailedVariant() {
    return html`
      <div class="id-container">${this.renderIndexBadge()}</div>
      <div class="detailed-content">
        <div class="poi-container">
          <obc-poi-object-vessel
            type="regular"
            .objectStyle=${"regular"}
            .state=${"static-unchecked"}
          >
            <slot name="poi-icon"></slot>
          </obc-poi-object-vessel>
        </div>
        <div class="text-container">
          <span class="title detailed-title">${this.cardTitle}</span>
          <span class="description">${this.description}</span>
        </div>
        <div class="meta-container">
          ${this.renderSourceBadge()}
          ${this.timestamp ? html`<span class="timestamp">${this.timestamp}</span>` : nothing}
        </div>
      </div>
      ${this.hasCloseButton ? html`<obc-icon-button
            variant="flat"
            class="close-button"
            @click=${this.handleCloseClick}
          >
            <obi-close-google></obi-close-google>
          </obc-icon-button>` : nothing}
    `;
  }
  render() {
    return html`
      <div
        part="wrapper"
        class=${classMap({
      wrapper: true,
      [`variant-${this.variant}`]: true
    })}
      >
        ${this.variant === "tag" ? this.renderTagVariant() : this.variant === "condensed" ? this.renderCondensedVariant() : this.variant === "regular" ? this.renderRegularVariant() : this.renderDetailedVariant()}
      </div>
    `;
  }
};
ObcPoiCardHeader.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "index", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "cardTitle", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "source", 2);
__decorateClass([
  property({ type: String })
], ObcPoiCardHeader.prototype, "timestamp", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCardHeader.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiCardHeader.prototype, "hasCloseButton", 2);
ObcPoiCardHeader = __decorateClass([
  customElement("obc-poi-card-header")
], ObcPoiCardHeader);
export {
  ObcPoiCardHeader,
  ObcPoiCardHeaderVariant
};
//# sourceMappingURL=poi-card-header.js.map
