import { unsafeCSS, LitElement, 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 "./form-container.css.js";
import "../scrollbar/scrollbar.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 ObcFormContainerType = /* @__PURE__ */ ((ObcFormContainerType2) => {
  ObcFormContainerType2["View"] = "view";
  ObcFormContainerType2["Enabled"] = "enabled";
  ObcFormContainerType2["Inactive"] = "inactive";
  ObcFormContainerType2["Completed"] = "completed";
  return ObcFormContainerType2;
})(ObcFormContainerType || {});
let ObcFormContainer = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "view";
    this.contentTitle = "";
  }
  renderTitle() {
    return html`
      <div class="title-section" part="title-section">
        <slot name="title"></slot>
      </div>
    `;
  }
  renderFooter() {
    return html`
      <div class="footer-section" part="footer-section">
        <slot name="footer"></slot>
      </div>
    `;
  }
  renderContentBody() {
    return html`
      <div class="content-body" part="content-body">
        ${this.contentTitle.trim() !== "" ? html`
              <div class="content-title" part="content-title">
                <slot name="content-title">${this.contentTitle}</slot>
              </div>
            ` : html`<slot name="content-title"></slot>`}
        <slot></slot>
      </div>
    `;
  }
  renderMainSection() {
    return html`
      <div class="main-section" part="main-section">
        <div class="content-section" part="content-section">
          ${this.renderContentBody()}
        </div>
        ${this.renderFooter()}
      </div>
    `;
  }
  render() {
    const wrapperClassMap = {
      wrapper: true,
      [`type-${this.type}`]: true
    };
    return html`
      <div class=${classMap(wrapperClassMap)} part="wrapper">
        ${this.renderTitle()}
        ${this.type === "completed" ? html`
              <obc-scrollbar class="content-scrollbar" part="content-scrollbar">
                ${this.renderMainSection()}
              </obc-scrollbar>
            ` : this.renderMainSection()}
      </div>
    `;
  }
};
ObcFormContainer.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcFormContainer.prototype, "type", 2);
__decorateClass([
  property({ type: String, attribute: "content-title" })
], ObcFormContainer.prototype, "contentTitle", 2);
ObcFormContainer = __decorateClass([
  customElement("obc-form-container")
], ObcFormContainer);
export {
  ObcFormContainer,
  ObcFormContainerType
};
//# sourceMappingURL=form-container.js.map
