import React, { useMemo } from 'react';
import { Avatar as AntdAvatar, Badge } from 'antd';
import _head from 'lodash/head';
import _upperCase from 'lodash/upperCase';
import _isNil from 'lodash/isNil';
import _isEmpty from 'lodash/isEmpty';
import _isNumber from 'lodash/isNumber';
import _omit from 'lodash/omit';
import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar';
import { getTextColorHex, px2rem } from './utils';
import { isValidStr } from '../utils';
import { imageUrlParser } from '../Image';

export { getTextColorHex };

export interface AvatarProps extends AntdAvatarProps {
  name?: string;
  isOnline?: boolean;
}
export const Avatar: React.FC<AvatarProps> = React.memo((_props) => {
  const { isOnline, ...props } = _props;
  const src = isValidStr(props.src) ? imageUrlParser(props.src) : undefined;

  const name = useMemo(() => _upperCase(_head(props.name)), [props.name]);

  const color = useMemo(
    () =>
      // 如果src为空 且 icon为空 则给个固定颜色
      _isEmpty(src) && _isNil(props.icon)
        ? getTextColorHex(props.name)
        : undefined,
    [src, props.icon, props.name]
  );

  const style: React.CSSProperties = useMemo(
    () => ({
      userSelect: 'none',
      ...props.style,
      backgroundColor: color,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }),
    [props.style, color]
  );

  if (_isNumber(props.size)) {
    // 为了支持rem统一管理宽度，将size转换为样式宽度(size类型上不支持rem单位)
    style.width = px2rem(props.size);
    style.height = px2rem(props.size);

    if (typeof style.fontSize === 'undefined') {
      // 如果props.size是数字且没有指定文字大小
      // 则自动增加fontSize大小
      style.fontSize = px2rem(props.size * 0.4);
    }
  }

  const inner = (
    <AntdAvatar {..._omit(props, ['size'])} src={src} style={style}>
      {name}
    </AntdAvatar>
  );

  if (typeof isOnline === 'boolean') {
    const style = {
      bottom: 0,
      top: 'auto',
    };

    if (isOnline === true) {
      return (
        <Badge dot={true} color="green" style={style}>
          {inner}
        </Badge>
      );
    } else {
      return (
        <Badge dot={true} color="#999" style={style}>
          {inner}
        </Badge>
      );
    }
  }

  return inner;
});
Avatar.displayName = 'Avatar';
