import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import Slide from '~molecules/carousel/default-slide';
import keygen from '~helpers/keygen';
import ScrollX from '~hooks/scroll-x';
import styles from './template-one.module.scss';

const Carousel = ({ page = {}, module = {}, gtmClass = '' }) => {
  const container = useRef(null);
  const scroll = (shift) => {
    container.current.scrollTo({
      left: container.current.scrollLeft + shift,
    });
  };

  return (
    <ScrollX refTag={container} scroll={scroll}>
      <div ref={container} className={styles.carouselContainer || ''}>
        {module.items.map((item, index) => (
          <div key={keygen()} className={styles.carouselItem || ''}>
            <Slide
              slideTitle={`${page.title}-carousel-${index + 1}`}
              item={item}
              gtmClass={gtmClass}
            />
          </div>
        ))}
      </div>
    </ScrollX>
  );
};

Carousel.propTypes = {
  page: PropTypes.shape({
    title: PropTypes.string,
  }),
  module: PropTypes.shape({
    items: PropTypes.arrayOf(
      PropTypes.shape({
        title: PropTypes.string,
        content: PropTypes.string,
        primary_action: PropTypes.string,
        secondary_action: PropTypes.string,
      })
    ),
    name: PropTypes.string,
  }),
  CustomSlideComponent: PropTypes.element,
  gtmClass: PropTypes.string,
};

export default Carousel;
