import { composeEventHandlers } from "./composeEvents";

export function useDebugEvents<T extends { "data-id"?: string }>(props: T): T {
  if (process.env.PREVIEW) {
    const eventNames = [
      "onClick",
      "onFocus",
      "onBlur",
      "onMouseOver",
      "onMouseOut",
      "onChange",
    ];
    eventNames.forEach((name) => {
      if (name in props) {
        props[name] = composeEventHandlers(() => {
          console.log(
            `🐳: "${name.slice(2).toLowerCase()}" event fired on "${
              props?.["data-id"]?.slice(-4) || "unknown component"
            }"`,
          );
        }, props[name]);
      }
    });
  }
  return props;
}