import { html, nothing } from 'lit';
import { query, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { OverlayScrollbars } from 'overlayscrollbars';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import styles from './scroll-view.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;
const overlayScrollbarsRegistry = /* @__PURE__ */ new Map();
let globalScrollViewOptions = {
  mode: "overlay",
  autoHide: "scroll",
  autoHideDelay: 1e3,
  autoHideSuspend: false
};
class FlowUiScrollView extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this._componentId = `flow-ui-scroll-view-${++id}`;
    this.mode = globalScrollViewOptions.mode;
    this.overflowX = "scroll";
    this.overflowY = "scroll";
    this.autoHide = globalScrollViewOptions.autoHide;
    this.autoHideDelay = globalScrollViewOptions.autoHideDelay;
    this.autoHideSuspend = globalScrollViewOptions.autoHideSuspend;
  }
  connectedCallback() {
    super.connectedCallback();
    this.autoHideSuspend = boolean(this.autoHideSuspend, true);
  }
  firstUpdated() {
    if (this.mode === "overlay") {
      this._overlayScrollbars = OverlayScrollbars(
        {
          target: this._scrollHost,
          elements: {
            viewport: this._scrollViewport
          }
        },
        {}
      );
      overlayScrollbarsRegistry.set(this._componentId, this._overlayScrollbars);
    }
  }
  updateScrollBars() {
    this._overlayScrollbars?.update(true);
  }
  updated(_changedProperties) {
    if (this._overlayScrollbars) {
      this._overlayScrollbars.options({
        overflow: {
          x: this.overflowX,
          y: this.overflowY
        },
        scrollbars: {
          theme: "os-theme-flow",
          autoHide: this.autoHide,
          autoHideDelay: this.autoHideDelay,
          autoHideSuspend: this.autoHideSuspend
        }
      });
    }
  }
  disconnectedCallback() {
    this._overlayScrollbars?.destroy();
    this._overlayScrollbars = void 0;
    overlayScrollbarsRegistry.delete(this._componentId);
    super.disconnectedCallback();
  }
  render() {
    const hostClasses = classMap({
      "scroll-view__host": true,
      "scroll-view--native": this.mode === "native"
    });
    const nativeStyles = styleMap({
      "overflow-x": this.overflowX,
      "overflow-y": this.overflowY
    });
    return html`
      <div class=${hostClasses} style=${ifDefined(this.mode === "native" ? nativeStyles : nothing)}>
        <div class="scroll-view__viewport">
          <slot></slot>
        </div>
      </div>
    `;
  }
}
FlowUiScrollView.styles = styles;
__decorateClass([
  query(".scroll-view__host")
], FlowUiScrollView.prototype, "_scrollHost", 2);
__decorateClass([
  query(".scroll-view__viewport")
], FlowUiScrollView.prototype, "_scrollViewport", 2);
__decorateClass([
  property()
], FlowUiScrollView.prototype, "mode", 2);
__decorateClass([
  property({ attribute: "overflow-x" })
], FlowUiScrollView.prototype, "overflowX", 2);
__decorateClass([
  property({ attribute: "overflow-y" })
], FlowUiScrollView.prototype, "overflowY", 2);
__decorateClass([
  property({ attribute: "auto-hide" })
], FlowUiScrollView.prototype, "autoHide", 2);
__decorateClass([
  property({ attribute: "auto-hide-delay", type: Number })
], FlowUiScrollView.prototype, "autoHideDelay", 2);
__decorateClass([
  property({ attribute: "auto-hide-suspend", type: Boolean })
], FlowUiScrollView.prototype, "autoHideSuspend", 2);

export { FlowUiScrollView as default };
