import * as React from 'react';
import { Avatar as AntAvatar, AvatarProps } from 'antd';
import { buildIcon } from '../CustomIcon';
import { CSSProperties, useEffect } from 'react';
import defaultAvatar from './avatar.png';
import { AvatarSize } from 'antd/lib/avatar/SizeContext';

declare type ComponentProps = {
  name?: string;
  path?: string;
  icon?: string;
  style?: CSSProperties;
  size?: AvatarSize | undefined;
} & AvatarProps;
const Avatar: React.FC<ComponentProps> = ({
  name,
  path,
  icon,
  style = {},
  size = 'default',
  ...rest
}) => {
  useEffect(() => { }, []);

  if (path) {
    return <AntAvatar style={style} src={path} size={size} {...rest} />;
  }

  if (icon) {
    return (
      <AntAvatar
        style={style}
        icon={buildIcon('', icon)}
        size={size}
        {...rest}
      />
    );
  }

  if (name) {
    return (
      <AntAvatar style={style} size={size} {...rest}>
        {/[\u4e00-\u9fa5]/.test(name)
          ? name.length > 3
            ? name.substr(2)
            : name.length == 3
              ? name.substr(1)
              : name
          : name}
      </AntAvatar>
    );
  }

  return <AntAvatar style={style} size={size} src={defaultAvatar} {...rest} />;
};

export default Avatar;
