import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { Avatar as NextAvatar } from '@alifd/next';
import { AvatarProps as NextAvatarProps } from '@alifd/next/types/avatar';

interface AvatarAddProps {
  group?:boolean;
  children?: React.ReactNode;
}
interface AvatarProps extends Omit<NextAvatarProps, 'size'> {
  size?: 'xl' | 'large' | 'medium' | 'small' | number;
}

interface AvatarGroupProps extends NextAvatarProps, AvatarAddProps{}

class AvatarGroup extends Component<AvatarGroupProps> {
  render() {
    const { children, prefix = 'next-' } = this.props;
    return (
      <div className = {`${prefix}avatar-group`}>
        {children}
      </div>
    );
  }
}

class Avatar extends Component<AvatarProps> {
  static Group = ConfigProvider.config(AvatarGroup);

  render() {
    const { prefix = 'next-', size, className, ...otherProps } = this.props;
    return (
      <NextAvatar
        size = {size as 'large' | 'medium' | 'small'}
        className = {cls(
          className, {
            [`${prefix}avatar-xl`]: size === 'xl',
          },
        )}
        {...otherProps}
      />);
  }
}

export default ConfigProvider.config(Avatar);