import React from "react";
import { callBoth } from "./call-both";
import { MatchKeys } from "./match-keys";

export type EventHandlerNames = MatchKeys<
  React.DOMAttributes<HTMLElement>,
  React.ReactEventHandler
>;

export type EventHandlerProps = Pick<
  React.DOMAttributes<HTMLElement>,
  EventHandlerNames
>;

/**
 * 透传 props 中的事件处理器，可以从 occupiedProps 指定已有的处理函数，会同时调用
 *
 * @param props 组件 Props
 * @param occupiedProps 已被使用的事件 Props
 */
export function mergeEventProps<P extends {}>(
  props: P,
  occupiedProps: Partial<EventHandlerProps> = {}
) {
  const mergedProps: Partial<EventHandlerProps> = {};

  for (const [key, prop] of Object.entries(props)) {
    if (
      /^on(Mouse|Touch|Key|Drag|Drop|Click|DoubleClick|ContextMenu|Focus|Blur).*/.test(
        key
      ) &&
      typeof prop === "function"
    ) {
      mergedProps[key] = prop;
    }
  }

  for (const [key, handler] of Object.entries(occupiedProps)) {
    if (typeof mergedProps[key] === "function") {
      mergedProps[key] = callBoth(handler, mergedProps[key]);
    } else {
      mergedProps[key] = handler;
    }
  }

  return mergedProps;
}