import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, state, queryAssignedElements, query } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import compentStyle from "./alert-list.css.js";
import "../../components/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;
};
let ObcAlertList = class extends LitElement {
  constructor() {
    super(...arguments);
    this.filter = () => true;
    this.oldElementTop = /* @__PURE__ */ new Map();
    this.mutationObserver = null;
    this.intersectionObserver = null;
    this.hasRenderedPanel = false;
    this._empty = false;
  }
  firstUpdated() {
    this.updateEmpty();
    this.setupMutationObserver();
  }
  connectedCallback() {
    super.connectedCallback();
    const intersectionObserver = new IntersectionObserver((entries) => {
      if (entries[0].intersectionRatio === 0) {
        this.hasRenderedPanel = false;
      }
    });
    intersectionObserver.observe(this);
    this.intersectionObserver = intersectionObserver;
    this.setupMutationObserver();
  }
  disconnectedCallback() {
    if (this.mutationObserver) {
      this.mutationObserver.disconnect();
      this.mutationObserver = null;
    }
    if (this.intersectionObserver) {
      this.intersectionObserver.disconnect();
      this.intersectionObserver = null;
    }
  }
  willUpdate(_changedProperties) {
    if (_changedProperties.has("filter")) {
      this.updateEmpty();
      this.updateOldElementTop();
    }
  }
  updateEmpty() {
    this._empty = this.getAlertItems().length === 0;
  }
  getAlertItems() {
    return this.alertItems.filter(this.filter);
  }
  updateOldElementTop() {
    const elements = this.getAlertItems();
    if (elements.length === 0) {
      return;
    }
    const firstElement = elements[0];
    const firstElementRect = firstElement.getBoundingClientRect();
    let top = firstElementRect.top;
    this.oldElementTop.clear();
    elements.forEach((element) => {
      const elementRect = element.getBoundingClientRect();
      if (elementRect.height === 0) {
        return;
      }
      this.oldElementTop.set(element, top);
      top += elementRect.height;
    });
  }
  setupMutationObserver() {
    if (this.mutationObserver) {
      this.mutationObserver.disconnect();
      this.mutationObserver = null;
    }
    this.mutationObserver = new MutationObserver(() => {
      this.handleElementsChange();
    });
    const slotElements = this.alertItems;
    slotElements.forEach((element) => {
      this.mutationObserver?.observe(element, {
        attributes: true,
        attributeFilter: ["status", "shelved"]
      });
    });
  }
  handleSlotChange() {
    this.handleElementsChange();
    this.setupMutationObserver();
  }
  handleElementsChange() {
    this.mutationObserver?.takeRecords();
    if (!this.checkVisibility()) {
      return;
    }
    this.updateEmpty();
    const elements = this.getAlertItems();
    const oldElementTop = new Map(this.oldElementTop);
    requestAnimationFrame(() => {
      this.updateOldElementTop();
      let hasNewElements = false;
      elements.forEach((element) => {
        const elementRect = element.getBoundingClientRect();
        const oldTop = oldElementTop.get(element);
        if (oldTop === void 0) {
          element.animateIntro = this.hasRenderedPanel;
          hasNewElements = true;
          setTimeout(() => {
            element.animateIntro = false;
          }, 101);
          return;
        }
        const diff = oldTop - elementRect.top;
        if (diff === 0) return;
        element.style.transform = `translateY(${diff}px)`;
        element.style.transition = "none";
        element.offsetHeight;
        element.style.transition = "transform 100ms ease-in-out";
        element.style.transform = "translateY(0px)";
      });
      this.hasRenderedPanel = true;
      if (hasNewElements) {
        setTimeout(() => {
          this.updateOldElementTop();
        }, 101);
      }
    });
  }
  getVisibleElements() {
    const scrollbarRect = this.scrollbar.getBoundingClientRect();
    const slottedElements = this.getAlertItems();
    return slottedElements.map((element, index) => ({ element, index })).filter(({ element }) => {
      const style = window.getComputedStyle(element);
      if (style.display === "none" || style.visibility === "hidden") {
        return false;
      }
      const elementRect = element.getBoundingClientRect();
      const isVisible = !(elementRect.top < scrollbarRect.top || elementRect.bottom > scrollbarRect.bottom);
      return isVisible;
    });
  }
  render() {
    return html` <obc-scrollbar class="alert-list" id="scrollbar">
      <slot @slotchange=${this.handleSlotChange}></slot>
      ${this._empty ? html` <div class="empty-list">
            <div class="icon">
              <slot name="empty-icon"></slot>
            </div>
            <div class="empty-title">
              <slot name="empty-title"></slot>
            </div>
            <div class="empty-description">
              <slot name="empty-description"></slot>
            </div>
          </div>` : nothing}
    </obc-scrollbar>`;
  }
};
ObcAlertList.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ attribute: false })
], ObcAlertList.prototype, "filter", 2);
__decorateClass([
  state()
], ObcAlertList.prototype, "_empty", 2);
__decorateClass([
  queryAssignedElements({ flatten: true })
], ObcAlertList.prototype, "alertItems", 2);
__decorateClass([
  query("#scrollbar", true)
], ObcAlertList.prototype, "scrollbar", 2);
ObcAlertList = __decorateClass([
  customElement("obc-alert-list")
], ObcAlertList);
export {
  ObcAlertList
};
//# sourceMappingURL=alert-list.js.map
