import { IdIconProps } from '@transferwise/icons';
import { Flag } from '@wise/art';
import { clsx } from 'clsx';
import { cloneElement, ReactElement, ReactNode } from 'react';

import Body from '../../body';
import { Typography } from '../../common';

export type Props<T> = {
  label: ReactNode;
  value: T;
  currency?: string;
  note?: ReactNode;
  secondary?: ReactNode;
  icon?: ReactNode;
  /** @deprecated */
  classNames?: Record<string, string>;
  selected?: boolean;
  testId?: string;
};

function Option<T>({
  label,
  currency = '',
  note = '',
  secondary = '',
  icon,
  selected = false,
  testId,
}: Props<T>) {
  const iconElement = icon
    ? cloneElement(icon as ReactElement<IdIconProps>, {
        size: 24,
        className: 'tw-icon',
      })
    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;

  const titleAndNoteElement = (
    <Body as="span" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>
      {label}
      {note && (
        <Body as="span" className="m-l-1">
          {note}
        </Body>
      )}
    </Body>
  );

  const secondaryElement = secondary && (
    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>
  );

  return iconElement ? (
    <div className="d-flex np-option-content" data-testid={testId}>
      <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
        {iconElement}
      </div>
      <div className="d-flex flex-column justify-content-center">
        {titleAndNoteElement}
        {secondaryElement}
      </div>
    </div>
  ) : (
    <>
      {iconElement}
      {titleAndNoteElement}
      {secondaryElement}
    </>
  );
}

export default Option;
