import { BehaviorCatcher } from './common';
import { BehaviorCatcherConfig, DomDatasetBoolean, ExposeHTMLElement } from '../types';
import { ExposeTarget } from './ExposeTarget';

interface ExposeRootConfig extends BehaviorCatcherConfig<ExposeHTMLElement> {
  name?: string;
  observer: IntersectionObserver;
}

export class ExposeRoot extends BehaviorCatcher<ExposeHTMLElement> {
  name?: string;
  private observer: IntersectionObserver;
  private exposeTargets: ExposeTarget[];

  constructor(config: ExposeRootConfig) {
    super(config);
    this.name = config?.name;
    this.exposeTargets = [];
    this.observer = config.observer;
    if (this.el.dataset.mlRoot !== DomDatasetBoolean.TRUE) {
      this.el.dataset.mlRoot = DomDatasetBoolean.TRUE;
    }
    if (config?.name && this.el.dataset.mlName !== config.name) this.el.dataset.mlName = config.name;
  }

  updateConfig(config: ExposeRootConfig) {
    this.name = config.name;
    if (config.observer) {
      this.exposeTargets = [];
      this.observer = config.observer;
    }
    this.el.dataset.mlRoot = DomDatasetBoolean.TRUE;
    if (config?.name) this.el.dataset.mlName = config.name;
  }

  unObserver(target: ExposeTarget) {
    this.observer?.unobserve(target.el);
    const targetIndex = this.exposeTargets.findIndex((item) => item === target);
    if (targetIndex >= 0) {
      this.exposeTargets.splice(targetIndex, 1);
    }
  }

  observe(target: ExposeTarget) {
    if (this.exposeTargets.findIndex((item) => item.el === target.el) >= 0) {
      return;
    }
    this.observer.observe(target.el);
    this.exposeTargets.push(target);
  }

  destroy() {
    this.observer.disconnect();
    this.exposeTargets = [];
    if (this.el.dataset.mlRoot) {
      delete this.el.dataset.mlRoot;
    }
    if (this.el.dataset.mlName) {
      delete this.el.dataset.mlName;
    }
  }
}