import React, { FC, ReactNode, ReactType } from 'react';

import DefaultImage, { ImageProps } from '../Image';
import css from './index.module.css';
import { LinkProps } from '../Link';
import classNames from 'classnames';
import ArrowSVG from '../../assets/icons/icon-arrow-left.svg';
import Ribbon from '../../components/Ribbon';

export interface CardProps {
  ImageProps?: ImageProps;
  Image?: ReactType<ImageProps>;
  LinkProps?: LinkProps;
  title?: string;
  children?: ReactNode;
  id: string;
  variant: 'normal' | 'redesign' | 'card-normal' | 'card-small';
  urlName?: string;
  Link?: ReactType;
  backgroundColor: string;
  campaign?: string;
}

const WithLink = ({ Link, LinkProps, children }): any =>
  Link && LinkProps ? <Link {...LinkProps}>{children}</Link> : children;

const getContrastYIQ = (hexcolor): string => {
  hexcolor = hexcolor.replace('#', '');
  const r = parseInt(hexcolor.substr(0, 2), 16);
  const g = parseInt(hexcolor.substr(2, 2), 16);
  const b = parseInt(hexcolor.substr(4, 2), 16);
  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
  return yiq >= 128 ? '#142046' : 'white';
};
const Card: FC<CardProps> = ({
  children,
  title,
  Image = DefaultImage,
  ImageProps,
  variant,
  Link,
  LinkProps,
  urlName,
  backgroundColor,
  campaign,
}) => {
  const isSvgImage =
    ImageProps && ImageProps?.file?.contentType === 'image/svg+xml';

  const isSvgFromUrl = ImageProps?.src?.split('.').pop() === 'svg';
  return (
    <>
      <div
        className={classNames({
          [css.card]: variant === 'normal',
          [css.card__redesign]:
            variant === 'redesign' || variant?.includes('card'),
          [css.card__small]: variant === 'card-small',
          [css.card__normal]: variant === 'card-normal',
        })}
        style={{
          backgroundColor: backgroundColor,
          color: backgroundColor ? getContrastYIQ(backgroundColor) : '#142046',
        }}
        data-testid="Card"
      >
        <WithLink Link={Link} LinkProps={LinkProps}>
          {!isSvgImage && !isSvgFromUrl && Image && ImageProps && (
            <div className={css.card__image}>
              <div className={css.card__imageWrap}>
                <Image {...ImageProps} className={css.card__imageElement} />
              </div>
            </div>
          )}

          {!isSvgImage && isSvgFromUrl && ImageProps && (
            <div className={classNames(css.card__svg, css.card__svgUrl)}>
              <svg xmlns="http://www.w3.org/2000/svg">
                <image href={ImageProps.src} />
              </svg>
            </div>
          )}
          {isSvgImage && ImageProps && ImageProps.svg && (
            <div className={css.card__svg}>
              <div
                className={css.card__imageWrap}
                dangerouslySetInnerHTML={{ __html: ImageProps.svg.content }}
              />
            </div>
          )}
          {campaign && <Ribbon content={campaign} />}
          {(title || children) && (
            <div className={css.card__contentWrap}>
              <h3 className={css.card__title}>{title}</h3>
              {children && <div className={css.card__content}>{children}</div>}
              {Link && LinkProps && (
                <div
                  className={`link ${css.card__link}`}
                  style={{ display: 'flex' }}
                >
                  {urlName}
                  <ArrowSVG className={css.arrow__svg} />
                </div>
              )}
            </div>
          )}
        </WithLink>
      </div>
    </>
  );
};

export default Card;