import styles from './MultipleImagesContainer.module.scss';
import {
  IMAGESIZECONTAINER,
  MultipleImageContainerFormat as MultipleImageContainerFormatI,
  SingleImageContainerFormat,
} from '../../models/common';
import Image from '../Image';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { useMediaQuery } from 'react-responsive';
import { useEffect, useState } from 'react';
import Video from '../Video';

export type Props = MultipleImageContainerFormatI;

interface ImgSize {
  width: number;
  height: number;
}

interface ImgResponsiveSize {
  [key: string]: ImgSize[];
}

type ImageSizes = { [key: string]: ImgSize[] | ImgResponsiveSize };

const fullWidthImg = {
  width: 1280,
  height: 682,
};
const halfWidthImg = {
  width: 640,
  height: 682,
};
const bigImg = {
  width: 840,
  height: 628,
};
const smallImg = {
  width: 400,
  height: 628,
  layout: 'intrinsic',
};

const imageSizes: ImageSizes = {
  [IMAGESIZECONTAINER.THIRTYSEVENTYWIDTH]: [smallImg, bigImg],
  [IMAGESIZECONTAINER.SEVENTYTHIRTYWIDTH]: [bigImg, smallImg],
  [IMAGESIZECONTAINER.ONETHIRDWIDTH]: [smallImg, smallImg, smallImg],
  [IMAGESIZECONTAINER.FULLWIDTH]: {
    desktop: [fullWidthImg],
    mobile: [halfWidthImg],
  },
  [IMAGESIZECONTAINER.HALFWIDTH]: [halfWidthImg],
};

const MultipleImagesContainer = (props: Props): JSX.Element => {
  const { images, size, id } = props;
  const isDesktop = useMediaQuery({ query: '(min-width: 560px)' });
  const [mounted, setMounted] = useState(false);
  const imgResponsiveSizes =
    'desktop' in imageSizes[size]
      ? (imageSizes[size] as ImgResponsiveSize)
      : null;
  const imgSizes =
    imgResponsiveSizes && !id
      ? (imgResponsiveSizes[isDesktop ? 'desktop' : 'mobile'] as ImgSize[])
      : null;
  const widthHeight = (imgSizes as ImgSize[]) || imageSizes[size];

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

  if (!mounted) return <></>;

  return (
    <div className={`${styles.imagesContainer} ${styles[size]}`}>
      {size !== IMAGESIZECONTAINER.ONETHIRDWIDTH ||
      (isDesktop && size === IMAGESIZECONTAINER.ONETHIRDWIDTH) ? (
        images?.map((img, idx) => (
          <div
            key={idx}
            className={`${styles.content} ${
              size === IMAGESIZECONTAINER.ONETHIRDWIDTH
                ? styles.contentSlide
                : ''
            }`}
          >
            <div>
              {img && img?.type !== 'video' && img.src ? (
                <Image
                  alt={img?.alt || ''}
                  image={{ ...img, ...widthHeight[idx] }}
                  isParralaxImg={
                    (img as SingleImageContainerFormat).isParallaxImage
                  }
                />
              ) : (
                img && img.src && (
                  <Video
                    video={{ src: img?.src || '', alt: '' }}
                    className={styles.noPadding}
                  />
                )
              )}
            </div>
          </div>
        ))
      ) : (
        <Swiper spaceBetween={16} loop={true} loopAdditionalSlides={5}>
          {images?.map((img, idx) => (
            <SwiperSlide
              key={idx}
              className={`${styles.content} ${styles.contentSlide}`}
            >
              <div>
                {img && img?.type !== 'video' ? (
                  <Image
                    alt={img?.alt || ''}
                    image={{ ...img, ...widthHeight[idx] }}
                  />
                )  : img && img.src ? (
                  <Video
                    video={{ src: img?.src || '', alt: '' }}
                    className={styles.noPadding}
                  />
                ) : null}
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      )}
    </div>
  );
};

export default MultipleImagesContainer;