import type { CSSProperties, ReactElement } from 'react';
import * as React from 'react';
import classNames from 'classnames';
import { isRTL } from '@cainiaofe/cn-i18n';

export type IWithNativeProps<S extends string = never> = {
  className?: string;
  style?: CSSProperties & Partial<Record<S, string>>;
  tabIndex?: number;
  elementtiming?: string;
  [key: `data-${string}`]: string;
} & React.AriaAttributes;

export function withNativeProps<P extends IWithNativeProps>(
  props: P,
  element: ReactElement,
) {
  const p = {
    ...element.props,
  };
  if (props.className) {
    p.className = classNames(element.props.className, props.className);
  }
  if (props.style) {
    p.style = {
      ...p.style,
      ...props.style,
    };
  }
  if (props.tabIndex !== undefined) {
    p.tabIndex = props.tabIndex;
  }

  if (props.elementtiming !== undefined) {
    p.elementtiming = props.elementtiming;
  }

  for (const key in props) {
    // eslint-disable-next-line no-prototype-builtins
    if (!props.hasOwnProperty(key)) continue;
    if (key.startsWith('data-') || key.startsWith('aria-')) {
      p[key] = props[key];
    }
  }
  p.rtl = isRTL();
  return React.cloneElement(element, p);
}

// 过滤Native props 正则，不希望被透传
export const nativePropsReg = /data-|elementtiming|-/;