import { unsafeCSS, LitElement, html } from "lit";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import compentStyle from "./accordion-card.css.js";
import { property } from "lit/decorators.js";
import "../../icons/icon-chevron-up-google.js";
import "../../icons/icon-chevron-down-google.js";
import { ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus } from "../alert-frame/alert-frame.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 AccordionSize = /* @__PURE__ */ ((AccordionSize2) => {
  AccordionSize2["SingleLine"] = "single-line";
  AccordionSize2["Large"] = "large";
  return AccordionSize2;
})(AccordionSize || {});
var Position = /* @__PURE__ */ ((Position2) => {
  Position2["top"] = "top";
  Position2["bottom"] = "bottom";
  Position2["center"] = "center";
  Position2["regular"] = "regular";
  return Position2;
})(Position || {});
let ObcAccordionCard = class extends LitElement {
  constructor() {
    super(...arguments);
    this.cardTitle = "";
    this.description = "";
    this.statusLabel = "";
    this.expanded = false;
    this.disabled = false;
    this.hasAlert = false;
    this.hasDescription = false;
    this.hasStatusLabel = false;
    this.hasLeadingIcon = false;
    this.position = "regular";
    this.size = "single-line";
    this.alertFrameType = ObcAlertFrameType.Regular;
    this.alertFrameThickness = ObcAlertFrameThickness.Small;
    this.alertFrameStatus = ObcAlertFrameStatus.Alarm;
  }
  get shouldShowDescription() {
    return this.size === "large" && this.hasDescription && this.description.trim() !== "";
  }
  handleToggle() {
    if (this.disabled) return;
    this.expanded = !this.expanded;
    this.dispatchEvent(
      new CustomEvent("accordion-toggle", {
        detail: {
          expanded: this.expanded,
          cardTitle: this.cardTitle
        }
      })
    );
  }
  renderContentMain() {
    return html`
      <div class="header-container">
        <div class="content-container">
          ${this.hasLeadingIcon ? html`
                <div class="container-icon">
                  <slot name="leading-icon"></slot>
                </div>
              ` : ""}
          <div class="container-labels">
            <div class="label-title">${this.cardTitle}</div>
            ${this.shouldShowDescription ? html` <div class="label-description">${this.description}</div> ` : ""}
          </div>
          ${this.hasStatusLabel ? html`
                <div class="container-status">
                  <div class="status">${this.statusLabel}</div>
                </div>
              ` : ""}
          <div class="trailing-icon">
            ${this.expanded ? html`<obi-chevron-up-google></obi-chevron-up-google>` : html`<obi-chevron-down-google></obi-chevron-down-google>`}
          </div>
        </div>
      </div>
    `;
  }
  renderContentAdditional() {
    if (!this.expanded) return "";
    return html`
      <div class="container-content-additional">
        <slot name="expanded-content"></slot>
      </div>
    `;
  }
  isShartEdgeBottom() {
    return this.position === "top" || this.position === "center";
  }
  isShartEdgeTop() {
    return this.position === "bottom" || this.position === "center";
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      "state-expanded": this.expanded,
      "state-collapsed": !this.expanded,
      "state-disabled": this.disabled,
      "style-single-line": this.size === "single-line",
      "style-large": this.size === "large",
      "position-top": this.position === "top",
      "position-bottom": this.position === "bottom",
      "position-center": this.position === "center"
      /* center */
    })}
        style="position: relative;"
      >
        <div class="card-container">
          <button
            class="content-button"
            @click=${this.handleToggle}
            ?disabled=${this.disabled}
            aria-expanded=${this.expanded}
            aria-controls="accordion-content"
          >
            ${this.renderContentMain()}
          </button>

          ${this.renderContentAdditional()}
        </div>

        ${this.hasAlert ? html`
              <obc-alert-frame
                class="alert"
                .sharpEdgeTopLeft=${this.isShartEdgeTop()}
                .sharpEdgeTopRight=${this.isShartEdgeTop()}
                .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}
                .sharpEdgeBottomRight=${this.isShartEdgeBottom()}
                .type=${this.alertFrameType}
                .thickness=${this.alertFrameThickness}
                .status=${this.alertFrameStatus}
              >
                <slot name="alert-icon" slot="icon"></slot>
                <slot name="alert-label" slot="label"></slot>
                <slot name="alert-timer" slot="timer"></slot>
              </obc-alert-frame>
            ` : ""}
      </div>
    `;
  }
};
ObcAccordionCard.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "cardTitle", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "statusLabel", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "expanded", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "hasAlert", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "hasDescription", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "hasStatusLabel", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAccordionCard.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "position", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "size", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "alertFrameType", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "alertFrameThickness", 2);
__decorateClass([
  property({ type: String })
], ObcAccordionCard.prototype, "alertFrameStatus", 2);
ObcAccordionCard = __decorateClass([
  customElement("obc-accordion-card")
], ObcAccordionCard);
export {
  AccordionSize,
  ObcAccordionCard,
  Position
};
//# sourceMappingURL=accordion-card.js.map
