import { getJSONFromStr } from "@web3r/flowerkit/json";
import { getAttr } from "./getAttr";

export type TStaticElementCfg<T> = T & {
  el: HTMLElement;
  selector: string;
};

/**
 * Получает конфигурацию компонента
 * @template T - тип пользовательской конфигурации, который ожидается в JSON-атрибуте и `defaultCfg`.
 * @param el{HTMLElement|Node} DOM-узел
 * @param selector{String=} селектор
 * @param defaultCfg{Object=} объект с конфигурацией по умолчанию
 * @returns {TStaticElementCfg<T>} Возвращает объединённую конфигурацию: `defaultCfg`, данные из атрибута и служебные поля `el`/`selector`.
 * @example
 * import { getCfg } from "@delement/ui/utils";
 *
 * const el = document.querySelector("[data-js-modal]") as HTMLElement;
 * const cfg = getCfg<{ isOpen?: boolean }>(el, "[data-js-modal]", { isOpen: false });
 */
export const getCfg = <T>(el: HTMLElement, selector: string, defaultCfg: T = {} as T): TStaticElementCfg<T> => {

  const attr = getAttr(selector);
  const attrValue = selector && el.hasAttribute(attr) ? el.getAttribute(attr) : null;

  const extraData = {
    el, selector,
  };

  return {
    ...defaultCfg,
    ...extraData,
    ...(attrValue ? getJSONFromStr<Partial<T>>(attrValue) : {}),
  };

};