import NextLink from 'next/link';
import Link from '../Link';
import { Image as ImageI, Link as LinkI } from '../../models/common';
import styles from './Case.module.scss';
import Img from './../Image';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { useEffect } from 'react';

export enum SizeText {
  LARGE = 'large_text',
  MEDIUM = 'medium_text',
  DEFAULT = 'large_text',
}

export type Props = {
  title: string;
  titleTextSize: SizeText;
  size?: 'small' | 'big';
  image: ImageI;
  link?: LinkI;
  className?: string;
};

const variants = {
  enter: {
    opacity: 1,
    y: '0px',
    transition: {
      duration: 0.5,
    },
  },
  initial: {
    opacity: 0,
    y: '100px',
  },
};

const Case = (props: Props): JSX.Element => {
  const { title, titleTextSize, link, image, className, size } = props;
  const controls = useAnimation();
  const [ref, inView] = useInView();
  const imageSizes = { width: image.width, height: image.height };

  useEffect(() => {
    if (inView) controls.start('enter');
  }, [ref, inView, controls]);

  return (
    <motion.div
      initial={'initial'}
      variants={variants}
      animate={controls}
      ref={ref}
      className={`${styles.case} ${className || ''}`}
    >
      {link?.url ? (
        <NextLink href={link?.url} legacyBehavior={true}>
          <a aria-label="image">
            <Img alt={image?.alt || ''} image={{ ...image, ...imageSizes }} />
          </a>
        </NextLink>
      ) : (
        <Img alt={image?.alt || ''} image={{ ...image, ...imageSizes }} />
      )}
      <div className={styles.container}>
        <div className={styles.secondCol}>
          {link?.url ? (
            <NextLink href={link?.url} legacyBehavior={true}>
              <a aria-label="image">
                <div className={titleTextSize}>{title}</div>
              </a>
            </NextLink>
          ) : (
            <div className={titleTextSize}>{title}</div>
          )}
          {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>
    </motion.div>
  );
};
export default Case;