import { html, nothing } from 'lit';
import { query, 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 { isStringFull } from '../../internal/type-checks.mjs';
import { setDefaultAnimation } from '../../utilities/animation-registry.mjs';
import styles from './split-view-pane.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;
};
let id = 0;
class FlowUiSplitViewPane extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.attrId = ++id;
    this.componentId = `flow-ui-split-view-pane-${this.attrId}`;
    this.vertical = false;
    this.closed = false;
    this.divider = false;
    this.hidden = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.id = isStringFull(this.id) ? this.id : this.componentId;
    this.vertical = boolean(this.vertical, true);
    this.closed = boolean(this.closed, true);
    this.divider = boolean(this.divider, true);
    this.hidden = boolean(this.hidden, true);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  /** @internal */
  cancelDrag() {
    if (this.dividerComponent) {
      this.dividerComponent.cancelDrag();
    }
  }
  /** Open the split pane. */
  async expand(emitEvent = true) {
    if (this.closed) {
      this.closed = false;
      if (emitEvent) {
        this.emit("flow-ui-expand");
      }
    }
  }
  /** Close the split pane. */
  async collapse(emitEvent = true) {
    if (!this.closed) {
      this.closed = true;
      if (emitEvent) {
        this.emit("flow-ui-collapse");
      }
    }
  }
  render() {
    return html`
      <div
        class=${classMap({
      "split-view-pane": true,
      "split-view-pane--vertical": this.vertical,
      "split-view-pane--horizontal": !this.vertical,
      "split-view-pane--hidden": this.hidden,
      "split-view-pane--closed": this.closed
    })}
        @flow-ui-expand=${(ev) => {
      ev.stopPropagation();
      this.expand();
    }}
        @flow-ui-collapse=${(ev) => {
      ev.stopPropagation();
      this.collapse();
    }}
      >
        <div part="contents" class="split-view-pane__contents">
          <slot></slot>
        </div>
        ${this.divider ? html`
              <flow-ui-split-view-divider
                part="divider"
                ?vertical=${this.vertical}
                class="split-view-pane__divider"
              ></flow-ui-split-view-divider>
            ` : nothing}
      </div>
    `;
  }
}
FlowUiSplitViewPane.styles = styles;
__decorateClass([
  query(".split-view-pane__divider")
], FlowUiSplitViewPane.prototype, "dividerComponent", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewPane.prototype, "vertical", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiSplitViewPane.prototype, "size", 2);
__decorateClass([
  property({ attribute: "min-size", reflect: true })
], FlowUiSplitViewPane.prototype, "minSize", 2);
__decorateClass([
  property({ attribute: "max-size", reflect: true })
], FlowUiSplitViewPane.prototype, "maxSize", 2);
__decorateClass([
  property({ attribute: "closed-size", reflect: true })
], FlowUiSplitViewPane.prototype, "closedSize", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewPane.prototype, "closed", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewPane.prototype, "divider", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewPane.prototype, "hidden", 2);
setDefaultAnimation("split-view-pane.expand", {
  keyframes: [{ height: "0" }, { height: "auto" }],
  options: { duration: 250, easing: "linear" }
});
setDefaultAnimation("split-view-pane.collapse", {
  keyframes: [{ height: "auto" }, { height: "0" }],
  options: { duration: 250, easing: "linear" }
});

export { FlowUiSplitViewPane as default };
