import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { boolean } from '../../internal/boolean.mjs';
import { drag } from '../../internal/drag.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import styles from './split-view-divider.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 FlowUiSplitViewDivider extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.vertical = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.vertical = boolean(this.vertical, true);
    this.disabled = boolean(this.disabled, true);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  /** @internal */
  cancelDrag() {
    if (this.dragCanceller) {
      this.dragCanceller();
      this.dragCanceller = void 0;
    }
  }
  handleDrag(event) {
    if (this.disabled) {
      return;
    }
    if (event.cancelable) {
      event.preventDefault();
    }
    this.toggleAttribute("dragging", true);
    const dragRoot = this.closestElement(".split-view-pane") ?? this.ownerDocument.body;
    this.emit("flow-ui-drag-start");
    this.dragCanceller = drag(dragRoot, {
      onMove: (x, y) => {
        this.emit("flow-ui-drag", { detail: { x, y } });
      },
      onStop: () => {
        this.emit("flow-ui-drag-end");
        this.toggleAttribute("dragging", false);
      }
      //initialEvent: event
    });
  }
  closestElement(selector, base = this) {
    function __closestFrom(el) {
      if (!el || el === document || el === window)
        return null;
      if (el.matches(selector))
        return el;
      if (el.assignedSlot)
        el = el.assignedSlot;
      const found = el.closest(selector);
      return found ? found : __closestFrom(el.getRootNode().host);
    }
    return __closestFrom(base);
  }
  render() {
    return html`
      <div
        part="divider"
        class="divider"
        tabindex=${ifDefined(this.disabled ? void 0 : "0")}
        role="separator"
        aria-valuemin="0"
        aria-valuemax="100"
        @pointerdown=${this.handleDrag}
        @touchstart=${this.handleDrag}
      >
        <slot name="divider"><div class="divider-highlight"></div></slot>
      </div>
    `;
  }
}
FlowUiSplitViewDivider.styles = styles;
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewDivider.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiSplitViewDivider.prototype, "vertical", 2);

export { FlowUiSplitViewDivider as default };
