import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
import { clsx } from 'clsx';
import { PropsWithChildren } from 'react';

import Alert from '../alert';
import { Sentiment } from '../common';
import Circle, { CircleProps } from '../common/circle';
import SentimentSurface from '../sentimentSurface';

export type CriticalCommsBannerSentiment =
  | `${Sentiment.WARNING}`
  | `${Sentiment.NEGATIVE}`
  | `${Sentiment.NEUTRAL}`;

export type CriticalCommsBannerProps = {
  title: string;
  subtitle?: string;
  action?: {
    label: string;
    href?: string;
    target?: HTMLAnchorElement['target'];
    onClick?: () => void;
  };
  sentiment?: CriticalCommsBannerSentiment;
  className?: string;
};

const makeSurface = (sentiment: CriticalCommsBannerSentiment) => {
  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
    <SentimentSurface as="span" emphasis="elevated" sentiment={sentiment} {...props} />
  );
  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
  return Surface;
};

const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
  [Sentiment.NEGATIVE]: (
    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className="status-circle negative">
      <AlertIcon className="status-icon light" />
    </Circle>
  ),
  [Sentiment.WARNING]: (
    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className="status-circle warning">
      <AlertIcon className="status-icon dark" />
    </Circle>
  ),
  [Sentiment.NEUTRAL]: (
    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className="status-circle neutral">
      <ClockIcon className="status-icon dark" />
    </Circle>
  ),
};

function CriticalCommsBanner({
  title,
  subtitle,
  action,
  sentiment = Sentiment.NEGATIVE,
  className,
}: CriticalCommsBannerProps) {
  return (
    <SentimentSurface
      sentiment={sentiment}
      emphasis="elevated"
      className={clsx('critical-comms', className)}
    >
      <Alert
        title={title}
        message={subtitle}
        action={
          action && {
            onClick: action.onClick,
            href: action.href,
            target: action.target,
            text: action.label,
            as: 'button',
          }
        }
        className={className}
        type={sentiment}
        icon={iconBySentiment[sentiment]}
      />
    </SentimentSurface>
  );
}

export default CriticalCommsBanner;