import { ReactNode } from 'react';
import { clsx } from 'clsx';

import StatusIcon from '../../statusIcon';
import Body from '../../body';
import Button from '../../button';
import { Breakpoint, Typography } from '../../common';
import AvatarView, { AvatarViewProps } from '../../avatarView';
import Image from '../../image';
import { ButtonProps } from '../../button/Button.types';
import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
import { BadgeAssetsProps } from '../../badge';
import { GiftBox } from '@transferwise/icons';
import { useScreenSize } from '../../common/hooks/useScreenSize';

export type ActionPromptProps = {
  title: ReactNode;
  description?: ReactNode;
  media?: {
    imgSrc?: string;
    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
      asset?: AvatarViewProps['children'];
      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
    };
    'aria-label'?: string;
  };
  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
    label: ButtonProps['children'];
  };
  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
    label: ButtonProps['children'];
  };
} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;

export const ActionPrompt = ({
  sentiment = 'neutral',
  title,
  description,
  onDismiss,
  media,
  action,
  actionSecondary,
  id,
  className,
  'data-testid': testId,
}: ActionPromptProps) => {
  const isMobile = !useScreenSize(Breakpoint.MEDIUM);

  const renderMedia = () => {
    if (media?.imgSrc) {
      return (
        <Image
          src={media.imgSrc}
          className="wds-action-prompt--media-image"
          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} size={48}>
          {media.avatar.asset}
        </AvatarView>
      );
    }
    return sentiment === 'proposition' ? (
      <AvatarView size={48}>
        <GiftBox />
      </AvatarView>
    ) : (
      <StatusIcon size={48} sentiment={sentiment} />
    );
  };

  return (
    <PrimitivePrompt
      id={id}
      sentiment={sentiment}
      data-testid={testId}
      className={clsx(
        'wds-action-prompt',
        { 'wds-action-prompt--with-two-actions': !!actionSecondary },
        className,
      )}
      media={renderMedia()}
      actions={
        <>
          {actionSecondary && (
            // @ts-expect-error onClick type mismatch
            <Button
              v2
              size="md"
              priority="secondary"
              href={actionSecondary.href}
              block={isMobile}
              onClick={actionSecondary?.onClick}
            >
              {actionSecondary.label}
            </Button>
          )}
          {/* @ts-expect-error onClick type mismatch */}
          <Button
            v2
            size="md"
            priority="primary"
            href={action.href}
            block={isMobile}
            onClick={action.onClick}
          >
            {action.label}
          </Button>
        </>
      }
      onDismiss={onDismiss}
    >
      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
        {description && <Body>{description}</Body>}
      </div>
    </PrimitivePrompt>
  );
};

export default ActionPrompt;
