import { html } from 'lit';
import { queryAssignedElements, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import styles from './panel.styles.mjs';

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;
};
class FlowUiPanel extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.closed = false;
    this.scrollable = false;
    this.padding = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.closed = boolean(this.closed, true);
    this.scrollable = boolean(this.scrollable, true);
    this.padding = boolean(this.padding, true);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  /** Open the panel */
  async expand(emitEvent = true) {
    if (this.closed) {
      this.closed = false;
      if (emitEvent) {
        this.emit("flow-ui-expand");
      }
    }
  }
  /** Close the panel */
  async collapse(emitEvent = true) {
    if (!this.closed) {
      this.closed = true;
      if (emitEvent) {
        this.emit("flow-ui-collapse");
      }
    }
  }
  handleSlotChange() {
    this.requestUpdate();
  }
  render() {
    return html`
      <div
        class=${classMap({
      panel: true,
      "panel--closed": this.closed,
      "panel--scrollable": this.scrollable,
      "panel--with-padding": this.padding,
      "panel--has-form-controls": this.formElements.length > 0
    })}
      >
        <slot
          name="header"
          class="panel__header"
          @flow-ui-expand=${() => this.expand(false)}
          @flow-ui-collapse=${() => this.collapse(false)}
        ></slot>

        <div class="panel__body-wrapper">
          <div part="body" class="panel__body">
            <slot @slotchange=${this.handleSlotChange}></slot>
          </div>
        </div>
      </div>
    `;
  }
}
FlowUiPanel.styles = styles;
__decorateClass([
  queryAssignedElements({ selector: ".flow-ui-form-control[borders]" })
], FlowUiPanel.prototype, "formElements", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiPanel.prototype, "closed", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiPanel.prototype, "scrollable", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiPanel.prototype, "padding", 2);

export { FlowUiPanel as default };
