import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./alert-frame.css.js";
import { classMap } from "lit/directives/class-map.js";
import "../../icons/icon-alarm-badge.js";
import "../../icons/icon-warning-badge.js";
import "../../icons/icon-caution-badge.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 ObcAlertFrameType = /* @__PURE__ */ ((ObcAlertFrameType2) => {
  ObcAlertFrameType2["Regular"] = "regular";
  ObcAlertFrameType2["SmallSideFlip"] = "small-side-flip";
  ObcAlertFrameType2["LargeSideFlip"] = "large-side-flip";
  ObcAlertFrameType2["BottomFlip"] = "bottom-flip";
  ObcAlertFrameType2["TopFlip"] = "top-flip";
  return ObcAlertFrameType2;
})(ObcAlertFrameType || {});
var ObcAlertFrameThickness = /* @__PURE__ */ ((ObcAlertFrameThickness2) => {
  ObcAlertFrameThickness2["Small"] = "small";
  ObcAlertFrameThickness2["Large"] = "large";
  return ObcAlertFrameThickness2;
})(ObcAlertFrameThickness || {});
var ObcAlertFrameStatus = /* @__PURE__ */ ((ObcAlertFrameStatus2) => {
  ObcAlertFrameStatus2["Alarm"] = "alarm";
  ObcAlertFrameStatus2["Warning"] = "warning";
  ObcAlertFrameStatus2["Caution"] = "caution";
  return ObcAlertFrameStatus2;
})(ObcAlertFrameStatus || {});
var AlertFrameTextSize = /* @__PURE__ */ ((AlertFrameTextSize2) => {
  AlertFrameTextSize2["Regular"] = "regular";
  AlertFrameTextSize2["Large"] = "large";
  return AlertFrameTextSize2;
})(AlertFrameTextSize || {});
let ObcAlertFrame = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "small-side-flip";
    this.thickness = "small";
    this.status = "alarm";
    this.sharpEdgeTopLeft = false;
    this.sharpEdgeTopRight = false;
    this.sharpEdgeBottomLeft = false;
    this.sharpEdgeBottomRight = false;
    this.textSize = "regular";
    this.showIcon = false;
    this.showAlertCategoryIcon = true;
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      ["thickness-" + this.thickness]: true,
      [this.type]: true,
      [this.status]: true,
      ["text-size-" + this.textSize]: true,
      "sharp-edge-top-left": this.sharpEdgeTopLeft,
      "sharp-edge-top-right": this.sharpEdgeTopRight,
      "sharp-edge-bottom-left": this.sharpEdgeBottomLeft,
      "sharp-edge-bottom-right": this.sharpEdgeBottomRight
    })}
      >
        <slot></slot>
        ${this.flap()}
      </div>
    `;
  }
  flap() {
    if (this.type === "regular") {
      return nothing;
    }
    let icon = html`<obi-alarm-badge
      class="icon badge"
    ></obi-alarm-badge>`;
    if (!this.showAlertCategoryIcon) {
      icon = nothing;
    } else if (this.status === "warning") {
      icon = html`<obi-warning-badge class="icon badge"></obi-warning-badge>`;
    } else if (this.status === "caution") {
      icon = html`<obi-caution-badge class="icon badge"></obi-caution-badge>`;
    }
    if (this.type === "small-side-flip") {
      return html`<div class="flap small">
        ${icon}
        <div class="mask up"></div>
      </div>`;
    }
    if (this.type === "large-side-flip") {
      return html`<div class="flap large">
        ${icon}
        ${this.showIcon ? html`<div class="icon"><slot name="icon"></slot></div>` : nothing}
        <div class="mask up"></div>
        <div class="mask down"></div>
      </div>`;
    }
    if (this.type === "bottom-flip" || this.type === "top-flip") {
      return html`<div
        class="flap ${this.type === "bottom-flip" ? "bottom" : "top"}"
      >
        ${icon}
        ${this.showIcon ? html`<div class="icon"><slot name="icon"></slot></div>` : nothing}
        <div class="label"><slot name="label"></slot></div>
        <div class="spacer"></div>
        <div class="timer"><slot name="timer"></slot></div>
        <div class="mask right"></div>
        <div class="mask left"></div>
      </div>`;
    }
    console.error("Unknown type of alert frame:", this.type);
    return nothing;
  }
};
ObcAlertFrame.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcAlertFrame.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcAlertFrame.prototype, "thickness", 2);
__decorateClass([
  property({ type: String })
], ObcAlertFrame.prototype, "status", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertFrame.prototype, "sharpEdgeTopLeft", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertFrame.prototype, "sharpEdgeTopRight", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertFrame.prototype, "sharpEdgeBottomLeft", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertFrame.prototype, "sharpEdgeBottomRight", 2);
__decorateClass([
  property({ type: String })
], ObcAlertFrame.prototype, "textSize", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertFrame.prototype, "showIcon", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcAlertFrame.prototype, "showAlertCategoryIcon", 2);
ObcAlertFrame = __decorateClass([
  customElement("obc-alert-frame")
], ObcAlertFrame);
export {
  AlertFrameTextSize,
  ObcAlertFrame,
  ObcAlertFrameStatus,
  ObcAlertFrameThickness,
  ObcAlertFrameType
};
//# sourceMappingURL=alert-frame.js.map
