import { ReactNode } from 'react';
import { GiftBox } from '@transferwise/icons';

import AvatarView, { AvatarViewProps } from '../../avatarView';
import Image from '../../image';
import StatusIcon from '../../statusIcon';
import { BadgeAssetsProps } from '../../badge';
import { PrimitivePromptProps } from '../PrimitivePrompt';

export type PromptMedia = {
  imgSrc?: string;
  avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
    asset?: AvatarViewProps['children'];
    badge?: Pick<BadgeAssetsProps, 'flagCode'>;
  };
  'aria-label'?: string;
  'aria-hidden'?: boolean;
};

type RenderPromptMediaOptions = {
  media: PromptMedia;
  sentiment: PrimitivePromptProps['sentiment'];
  mediaId: string;
  imgClassName: string;
};

export function renderPromptMedia({
  media,
  sentiment,
  mediaId,
  imgClassName,
}: RenderPromptMediaOptions): ReactNode {
  if (media?.imgSrc) {
    return (
      <Image
        id={mediaId}
        src={media.imgSrc}
        className={imgClassName}
        alt={media['aria-label'] ?? ''}
      />
    );
  }
  if (media?.avatar) {
    const badge = media.avatar.badge
      ? media.avatar.badge
      : sentiment === 'proposition'
        ? {}
        : { status: sentiment };
    return (
      <AvatarView
        {...media.avatar}
        badge={badge}
        aria-label={media['aria-label']}
        aria-hidden={media['aria-hidden']}
        id={mediaId}
        size={48}
      >
        {media.avatar.asset}
      </AvatarView>
    );
  }
  return sentiment === 'proposition' ? (
    <AvatarView
      id={mediaId}
      size={48}
      aria-label={media['aria-label']}
      aria-hidden={media['aria-hidden']}
    >
      <GiftBox />
    </AvatarView>
  ) : (
    <StatusIcon
      id={mediaId}
      size={48}
      sentiment={sentiment}
      iconLabel={media['aria-hidden'] ? null : media['aria-label']}
    />
  );
}
