import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
import { useState, useEffect } from 'react';

import Avatar, { AvatarProps, AvatarType } from '../avatar';
import Badge, { BadgeProps } from '../badge';
import {
  ProfileType,
  ProfileTypePersonal,
  ProfileTypeBusiness,
  Size,
  Sentiment,
  getInitials,
  Status,
} from '../common';
import StatusIcon from '../statusIcon/StatusIcon';

interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
  url?: string;
  ariaLabel?: string;
  altText?: string;
  statusIcon?: Sentiment | Status.PENDING;
}

const OptionalBadge = ({
  url,
  altText,
  statusIcon,
  children,
  ariaLabel,
  ...rest
}: OptionalBadgeProps) => {
  if (url) {
    return (
      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>
        {children}
      </Badge>
    );
  }
  if (statusIcon) {
    return (
      <Badge
        aria-label={ariaLabel}
        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}
        {...rest}
      >
        {children}
      </Badge>
    );
  }
  return <>{children}</>;
};

export type AvatarWrapperProps = {
  url?: string;
  'aria-label'?: string;
  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
  profileId?: string;
  name?: string;
  avatarProps?: AvatarProps;
  badgeProps?: BadgeProps;
} & (
  | {
      badgeUrl: string;
      badgeAltText: string;
      badgeStatusIcon?: never;
    }
  | {
      badgeUrl?: never;
      badgeAltText?: never;
      badgeStatusIcon: Sentiment | Status.PENDING;
    }
  | {
      badgeUrl?: never;
      badgeAltText?: never;
      badgeStatusIcon?: never;
    }
);

/**
 * @deprecated Use `AvatarView` component instead
 */
const AvatarWrapper = ({
  url,
  'aria-label': ariaLabel,
  profileType,
  profileId,
  badgeUrl,
  badgeAltText,
  badgeStatusIcon,
  name,
  avatarProps,
  badgeProps,
}: AvatarWrapperProps) => {
  const [hasImageLoadError, setImageLoadError] = useState(false);
  const isBusinessProfile = profileType === ProfileType.BUSINESS;

  // Reset the errored state when url changes
  useEffect(() => setImageLoadError(false), [url]);

  const getAvatarProps = () => {
    let updatedAvatarProps = avatarProps;
    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };
    }
    if (url && !hasImageLoadError) {
      return {
        type: AvatarType.THUMBNAIL,
        children: <img src={url} alt="" onError={() => setImageLoadError(true)} />,
        ...updatedAvatarProps,
      };
    }
    if (profileType) {
      return {
        type: AvatarType.ICON,
        children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
        ...updatedAvatarProps,
      };
    }
    if (name) {
      return {
        type: AvatarType.INITIALS,
        children: <>{getInitials(name)}</>,
        backgroundColorSeed: profileId?.toString(),
        ...updatedAvatarProps,
      };
    }
    return {
      type: AvatarType.ICON,
      children: <ProfileIcon size="24" />,
      ...updatedAvatarProps,
    };
  };

  return (
    <OptionalBadge
      url={badgeUrl}
      ariaLabel={ariaLabel}
      altText={badgeAltText}
      statusIcon={badgeStatusIcon}
      {...badgeProps}
    >
      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />
    </OptionalBadge>
  );
};

export default AvatarWrapper;