import Link, { LinkSizeIcon, LinkSizeText, LinkType } from '../Link';
import NextLink from 'next/link';
import React, { Fragment, useEffect, useLayoutEffect, useState } from 'react';
import styles from './WorkDone.module.scss';
import arrow from '../../public/imgs/icons/logo-chevron-blue.svg';
import { Image as ImageI } from '../../models/common';
import Image from './../Image';
import { useInView } from 'react-intersection-observer';
import { motion, useAnimation } from 'framer-motion';
import Case, { SizeText } from '../Case';
import { useRouter } from 'next/dist/client/router';
import { Languages } from '../../models/page';
import { useMediaQuery } from 'react-responsive';

export type WorkDoneItemProps = {
  image?: ImageI;
  title: string;
  keywords?: string[];
  url?: string;
  url_label?: string;
  className?: string;
  type?: string;
  languages?: Languages;
};

export type Props = {
  data: WorkDoneItemProps[];
};

const WorkDone = (props: Props): JSX.Element => {
  const isDesktop = useMediaQuery({ query: '(min-width: 560px)' });
  const [mounted, setMounted] = useState(false);
  const router = useRouter();
  const { locale: activeLocale } = router;
  const { data } = props;
  let id = 0;
  let skip: number = 0;

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    (data && mounted && (
      <div className={styles.workDoneContainer}>
        {data?.map((element, idx) => {
          const isCase = element.type === 'case';
          const isPreviousCase =
            (!isCase && data[idx - 1] && data[idx - 1].type === 'case') ||
            false;
          if (idx !== 0 && !isPreviousCase) {
            if (id <= 2 && !isCase) id += 1;
            if (id > 2 && skip <= 2 && !isCase) skip += 1;
            if (skip > 2 || isCase) {
              skip = 0;
              id = 0;
            }
          }
          let className = '';
          if (idx !== 0 && id <= 2 && !isCase && !isPreviousCase) {
            className = styles.containerItemBig;
            if (id === 2 && !isCase)
              className += ' ' + styles.containerItemBigWithoutMargin;
          }
          const caseImgSizes = isDesktop
            ? {
                width: 1280,
                height: 682,
              }
            : {
                width: 720,
                height: 905,
              };
          if (isCase && element.image)
            return (
              <Case
                title={element.title}
                titleTextSize={SizeText.LARGE}
                image={{
                  ...element.image,
                  ...caseImgSizes,
                  priority: idx < 4 ? true : false,
                }}
                key={idx}
                link={{
                  url:
                    element.languages && activeLocale
                      ? `${element.languages[activeLocale].url}`
                      : `${element.url}`,
                  label: element.url_label || '',
                  style: {
                    iconSize: LinkSizeIcon.DEFAULT,
                    isIconFirst: false,
                    textSize: LinkSizeText.MEDIUM,
                    type: LinkType.TOP_RIGHT_ARROW_ICON,
                  },
                }}
                className={styles.noPadding}
              />
            );

          return (
            <WorkDoneItem
              key={idx}
              image={{
                ...element.image,
                width: 720,
                height: 905,
                priority: idx < 4 ? true : false,
              }}
              title={element.title}
              keywords={element.keywords}
              url={
                element.languages && activeLocale
                  ? `${element.languages[activeLocale].url}`
                  : `${element.url}`
              }
              url_label={element.url_label}
              className={className}
            />
          );
        })}
      </div>
    )) || <></>
  );
};

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

const WorkDoneItem = (props: WorkDoneItemProps): JSX.Element => {
  const { image, title, keywords, url, url_label, className } = props;
  const controls = useAnimation();
  const [ref, inView] = useInView();

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

  return (
    <motion.div
      initial={'initial'}
      variants={variants}
      animate={controls}
      ref={ref}
      className={styles.containerItem + ' ' + className}
    >
      <NextLink href={`${url}`} legacyBehavior={true}>
        <a aria-label="image">
          {image && (
            <Image image={image} isParralaxImg={true} alt={image?.alt || ''} />
          )}
          <div className={styles.content}>
            <div className={styles.contentTitle}>
              <h4>{title}</h4>
            </div>

            {keywords ? (
              <div className={styles.keywords}>
                {keywords.map((keyword, id) => (
                  <Fragment key={id}>
                    {keyword}{' '}
                    {id !== keywords?.length - 1 ? (
                      <svg className={styles.chevron}>
                        <use href={`${arrow.src}#logo-chevron-blue`}></use>
                      </svg>
                    ) : null}
                  </Fragment>
                ))}
              </div>
            ) : null}

            {url_label && (
              <Link
                type={LinkType.TOP_RIGHT_ARROW_ICON}
                iconSize={LinkSizeIcon.DEFAULT}
                textSize={LinkSizeText.MEDIUM}
                isIconFirst={false}
              >
                {url_label}
              </Link>
            )}
          </div>
        </a>
      </NextLink>
    </motion.div>
  );
};

export default WorkDone;