import type { CSSProperties } from 'react';
import { memo, useCallback } from 'react';
import { useDispatch } from 'umi';

export interface UserWrapProps {
  /**
   * @description userId 和 account 必须二选一，不然就会报错
   */
  userId?: number;
  account?: string;
  style?: CSSProperties;
  children: any;
}

const UserWrap = (props: UserWrapProps) => {
  const { children, userId, account, style } = props;
  const dispatch = useDispatch();

  const click = useCallback(() => {
    if (userId || account) {
      dispatch({
        type: 'public/showFeishuUserDetail',
        payload: {
          showUserInfo: true,
          userId,
          account: userId ? undefined : account,
        },
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userId, account]);

  return (
    <div style={style} onClick={click}>
      {children}
    </div>
  );
};

export default memo(UserWrap);