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

import css from './index.module.css';

export interface TextImageProps {
  Image?: ReactType;
  ImageProps?: {
    title?: string;
    description?: string;
    svg?: {
      absolutePath?: string;
      content?: string;
      dataURI?: string;
      originalContent?: string;
      relativePath?: string;
    };
    style?: {
      maxWidth: string;
    };
    file?: {
      contentType?: string;
      url?: string;
      fileName?: string;
      details?: {
        image?: {
          width?: string;
          height?: string;
        };
      };
    };
    fluid?: unknown;
  };
  title: string;
  text?: ReactNode;
  imagePosition?: string;
  contentAlignment?: string;
  isSvgImage?: boolean;
  hideImageOnMobile?: boolean;
}

const TextImage: FC<TextImageProps> = ({
  Image,
  ImageProps = {},
  imagePosition = 'Top',
  contentAlignment = 'Left',
  title,
  text,
  isSvgImage = false,
  hideImageOnMobile = false,
}) => {
  imagePosition = imagePosition ? imagePosition : 'Top';
  contentAlignment = contentAlignment ? contentAlignment : 'Left';

  const textImageClassNames = classNames(css.textImage, {
    [`${css[`textImage${`Image${imagePosition}`}`]}`]: imagePosition,
    [`${css[`textImage${`Content${contentAlignment}`}`]}`]: contentAlignment,
  });
  const svgStyle = ImageProps?.style?.maxWidth
    ? {
        width: ImageProps.style.maxWidth,
        minWidth: ImageProps.style.maxWidth,
      }
    : {};
  return (
    <div className={textImageClassNames}>
      {!isSvgImage && Image && ImageProps && (
        <Image
          className={classNames(css.textImage__image, {
            [css.textImage__hideOnMobile]: hideImageOnMobile,
          })}
          {...ImageProps}
        />
      )}
      {isSvgImage && ImageProps && ImageProps.svg && (
        <div
          dangerouslySetInnerHTML={{ __html: ImageProps.svg.content }}
          style={{ ...svgStyle }}
          className={classNames(css.textImage__svg, {
            [`${css[`textImage__svg${`${imagePosition}`}`]}`]: imagePosition,
            [css.textImage__hideOnMobile]: hideImageOnMobile,
          })}
        />
      )}
      <div className={css.textImage__content}>
        <h3 className={css.textImage__title}>{title}</h3>
        {text}
      </div>
    </div>
  );
};

export default TextImage;
