import { isNode } from "@web3r/flowerkit/dom";
import type { RefObject } from "react";
import { createRef } from "react";

/**
 * Возвращает DOM-элемент, указанный в объекте `ref`.
 * Полезно, если в компоненте используется `useImperativeHandle`.
 * @template T - тип значения, хранящегося в `ref.current`.
 * @example
 * import { useEffect, useRef } from "react";
 * import { DatePicker } from "@delement/ui/components";
 * import { getElRefHelper } from "@delement/ui/utils/react";
 *
 * const Component = () => {
 *
 *   const pickerRef = useRef(null);
 *
 *   useEffect(() => {
 *     const node = getElRefHelper(pickerRef);
 *     console.debug(node); // => HTMLElement
 *   });
 *
 *   return <DatePicker ref={pickerRef} />;
 * };
 * @returns {HTMLElement|null} Возвращает найденный DOM-элемент или `null`, если его не удалось извлечь из `ref`.
 */
export const getElRefHelper = <T = unknown>(
  ref: RefObject<T | null> | HTMLElement | null | undefined = createRef<T>()
): HTMLElement | null => {

  if (!ref) {
    return null;
  }

  if (typeof HTMLElement !== "undefined" && ref instanceof HTMLElement) {
    return ref;
  }

  const current = ("current" in ref) ? ref.current : null;

  if (current && typeof current === "object") {
    const currentObj = current as Record<string, unknown>;

    if ("element" in currentObj && isNode(currentObj.element)) {
      return currentObj.element as HTMLElement;
    }

    if ("el" in currentObj && isNode(currentObj.el)) {
      return currentObj.el as HTMLElement;
    }

    if (isNode(current)) {
      return current as unknown as HTMLElement;
    }
  }

  return null;
};