import React from 'react';
import Imgix from 'react-imgix';
import { Settings } from 'react-slick';
import { URLService } from 'lib';

import * as Styles from './thumbnail-carousel.styles';
import { ThumbnailCarouselProps, ProductMedia } from './thumbnail-carousel.types';

const ThumbnailCarousel = (images: ThumbnailCarouselProps): JSX.Element => {
  const customPaging = (index: number): JSX.Element => (
    <a>
      <Imgix src={URLService.getImgix(images.images[index].src, 90)} width={90} />
    </a>
  );

  const slide = (image: ProductMedia, key: number): JSX.Element => (
    <div key={key}>
      <Imgix src={URLService.getImgix(image.src, 450)} width={450} />
    </div>
  );

  const settings: Settings = {
    customPaging,
    dots: true,
    infinite: true,
    fade: true,
    arrows: false
  };

  return (
    <>
      {!!images.images &&
        <Styles.Slider settings={settings}>
          {images.images.map((image: ProductMedia, i) => slide(image, i))}
        </Styles.Slider>
      }
    </>
  );
};

export default ThumbnailCarousel;