import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./modal-window.css.js";
import "../button/button.js";
import "../icon-button/icon-button.js";
import "../../icons/icon-close-google.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 ObcModalWindowSize = /* @__PURE__ */ ((ObcModalWindowSize2) => {
  ObcModalWindowSize2["Small"] = "small";
  ObcModalWindowSize2["Medium"] = "medium";
  ObcModalWindowSize2["Large"] = "large";
  return ObcModalWindowSize2;
})(ObcModalWindowSize || {});
let ObcModalWindow = class extends LitElement {
  constructor() {
    super(...arguments);
    this.size = "large";
    this.hasOptionalAction = false;
    this.hasLeadingIcon = false;
    this.onCloseClick = () => this.dispatchEvent(new CustomEvent("close-click"));
    this.onCancelClick = () => this.dispatchEvent(new CustomEvent("cancel-click"));
    this.onDoneClick = () => this.dispatchEvent(new CustomEvent("done-click"));
    this.onOptionClick = () => this.dispatchEvent(new CustomEvent("option-click"));
  }
  render() {
    const isLarge = this.size === "large";
    const isMedium = this.size === "medium";
    const isSmall = this.size === "small";
    return html`
      <div
        class=${classMap({
      wrapper: true,
      [`size-${this.size}`]: true
    })}
      >
        <div class="title-container">
          <div class="title-content">
            ${this.hasLeadingIcon ? html`<div class="leading-icon">
                  <slot name="leading-icon"></slot>
                </div>` : nothing}
            <div class="label-container">
              <slot name="title">Title</slot>
            </div>
          </div>
          <obc-icon-button variant="flat" @click=${this.onCloseClick}>
            <obi-close-google></obi-close-google>
          </obc-icon-button>
          <div class="divider"></div>
        </div>

        <div class="content-area">
          <slot name="content"></slot>
        </div>

        <div class="action-container">
          <div class="divider"></div>
          ${this.hasOptionalAction ? html`<div class="optional-action-container">
                <obc-button @click=${this.onOptionClick} .fullWidth=${true}>
                  <slot name="option-label">Option</slot>
                </obc-button>
              </div>` : nothing}

          <div
            class=${classMap({
      "primary-action-container": true,
      "primary-action-horizontal": isLarge || isMedium,
      "primary-action-vertical": isSmall
    })}
          >
            <obc-button
              @click=${this.onCancelClick}
              .fullWidth=${isSmall || isMedium}
            >
              <slot name="cancel-label">Cancel</slot>
            </obc-button>
            <obc-button
              variant="raised"
              @click=${this.onDoneClick}
              .fullWidth=${isSmall || isMedium}
            >
              <slot name="done-label">Done</slot>
            </obc-button>
          </div>
        </div>
      </div>
    `;
  }
};
ObcModalWindow.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcModalWindow.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean })
], ObcModalWindow.prototype, "hasOptionalAction", 2);
__decorateClass([
  property({ type: Boolean })
], ObcModalWindow.prototype, "hasLeadingIcon", 2);
ObcModalWindow = __decorateClass([
  customElement("obc-modal-window")
], ObcModalWindow);
export {
  ObcModalWindow,
  ObcModalWindowSize
};
//# sourceMappingURL=modal-window.js.map
