import { ref } from "vue";
import type { Ref } from "vue";

interface CustomerCallbackMap {
  onFocus?: (rect: object) => void;
  onBlur?: () => void;
  onClick?: () => void;
  onWidgetEdge?: (rect: object) => void;
}

export class MyRenderItem {
  private divMountedCallback: Array<(div: HTMLDivElement) => void> = [];

  public customerData: object;
  public mounted: Ref<boolean> = ref(false);
  public touchInit: boolean = false;
  public rootDiv: HTMLDivElement | null = null;

  private customerCallbackMap: CustomerCallbackMap = {};
  private onRef: (() => void) | null;
  public readonly registerObj: object;
  public readonly query: object;

  constructor(customerData: object, onRef: () => void, query: object) {
    this.customerData = customerData;
    this.onRef = onRef;
    const register = this.register.bind(this);
    const unregister = this.unregister.bind(this);
    this.registerObj = { register, unregister };
    this.query = query;
  }

  //TODO item的div ref 会调用多次, 待调查
  public divRef = (ele: HTMLDivElement | null) => {
    this.rootDiv = ele;
    if (ele) {
      this.onDivMounted();
    } else {
      this.onDivUnmounted();
    }
  };

  public slotRef = (ele: object | null) => {
    if (!this.mounted.value && ele) {
      this.mounted.value = true;
      this.onRef?.();
    } else if (!ele && this.mounted.value) {
      this.mounted.value = false;
    }
  };

  public register(name: string, callback: Function) {
    (this.customerCallbackMap as any)[name] = callback;
  }

  public unregister(name: string) {
    delete (this.customerCallbackMap as any)[name];
  }

  public onFocus(rect: object): boolean {
    if (this.mounted.value) {
      this.customerCallbackMap.onFocus?.(rect);
      return true;
    } else {
      return false;
    }
  }

  public onBlur(): boolean {
    if (this.mounted.value) {
      this.customerCallbackMap.onBlur?.();
      return true;
    } else {
      return false;
    }
  }

  public onClick(): boolean {
    if (this.mounted.value) {
      this.customerCallbackMap.onClick?.();
      return true;
    } else {
      return false;
    }
  }

  public onWidgetEdge(rect: object): boolean {
    if (this.mounted.value) {
      this.customerCallbackMap.onWidgetEdge?.(rect);
      return true;
    } else {
      return false;
    }
  }

  public addDivMountedListener(cbk: (div: HTMLDivElement) => void) {
    this.divMountedCallback.push(cbk);
  }

  private onDivMounted(): void {
    if (this.divMountedCallback.length > 0) {
      this.divMountedCallback.forEach((cbk: (ele: HTMLDivElement) => void) => {
        if (this.rootDiv) {
          cbk(this.rootDiv);
        }
      });
    }
    this.divMountedCallback = [];
  }

  private onDivUnmounted(): void {
    this.touchInit = false;
    this.divMountedCallback = [];
  }
}