import Link from '../Link';
import styles from './ImageTitleTextAndLink.module.scss';
import { Image as ImageI, Link as LinkI } from '../../models/common';
import Img from './../Image';

export enum ImageTitleTextAndLinkPosition {
  CENTER = 'center',
  LEFT = 'left',
  RIGHT = 'right',
}

export enum ImageTitleTextAndLinkSize {
  SMALL = 'small',
  LARGE = 'large',
}

export type Props = {
  title: string;
  description: string;
  isImageFirst: boolean;
  image: ImageI;
  link?: LinkI;
  position?: ImageTitleTextAndLinkPosition;
  imageSize?: ImageTitleTextAndLinkSize;
};

const ImageTitleTextAndLink = (props: Props): JSX.Element => {
  const {
    title,
    description,
    isImageFirst,
    image,
    link,
    position = ImageTitleTextAndLinkPosition.RIGHT,
    imageSize = ImageTitleTextAndLinkSize.LARGE,
  } = props;

  const imgSizes =
    imageSize === ImageTitleTextAndLinkSize.LARGE
      ? (image?.width || 0) > (image?.height || 0)
        ? { width: 640, height: 458 }
        : { width: 640, height: 728 }
      : (image?.width || 0) > (image?.height || 0)
      ? { width: 488, height: 349 }
      : { width: 488, height: 668 };

  return (
    <div className={`${styles.imageTitleTextAndLink}`}>
      <div
        className={`${styles.container} ${
          isImageFirst ? styles.reverseContainer : ''
        }  ${styles[position]}`}
      >
        <div className={styles.imageTitleTextAndLink_col_text}>
          <div className={styles.textContainer}>
            <div className={`medium_text ${styles.medium_text}`}>{title}</div>
            <div className={`text_5 ${styles.text_5_white}`}>{description}</div>
            <div className={styles.actionContainer}>
              {link?.url && (
                <Link
                  href={link?.url}
                  type={link?.style?.type}
                  iconSize={link.style?.iconSize}
                  textSize={link.style?.textSize}
                  isIconFirst={link.style?.isIconFirst}
                  isExternal={link.isExternal}
                >
                  {link?.label}
                </Link>
              )}
            </div>
          </div>
        </div>
        <div
          className={`${styles.imageTitleTextAndLink_col_image} ${styles[imageSize]}`}
        >
          <Img
            alt={image?.alt || ''}
            image={{ ...image, ...imgSizes }}
            isParralaxImg={true}
          />
        </div>
      </div>
    </div>
  );
};

export default ImageTitleTextAndLink;