export function createElement<T extends HTMLElement>(
  tagName: string,
  ...children: (Node | string)[]
): T;

export function createElement<T extends HTMLElement>(
  tagName: string,
  attrs: Partial<T>,
  ...children: (Node | string)[]
): T;

export function createElement(tagName: string, ...args: any[]) {
  const el = document.createElement(tagName);

  if (args[0]?.constructor === Object) {
    const { dataset, style, ...attrs } = args.shift();
    Object.assign(el, attrs);
    if (dataset) Object.assign(el.dataset, dataset);
    if (style) Object.assign(el.style, style);
  }

  el.append(...args.flat());

  return el;
}

export type CreateElement<T extends HTMLElement> = {
  (...children: (Node | string)[]): T;
  (attrs: Partial<T>, ...children: (Node | string)[]): T;
};

type ElementCreator = {
  [K in keyof HTMLElementTagNameMap]: CreateElement<HTMLElementTagNameMap[K]>;
};

const h = new Proxy({} as ElementCreator, {
  get:
    (_, tagName: string) =>
    (...args: any[]) => {
      return createElement(tagName, ...args);
    },
});

export default h;

export function fragment(...children: (Node | string)[]): DocumentFragment {
  const fragment = document.createDocumentFragment();
  fragment.append(...children);
  return fragment;
}