/* eslint-disable react/no-array-index-key */
/* eslint-disable react/forbid-prop-types */
import React, { useRef, useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
import { Context } from '~context/MainProvider.js';
import AdminButton from '../../../atoms/admin/card/button';
import Item from './item';
import styles from './template-two.module.scss';
import Buttons from './buttons';

const CustomCarousel = ({ page, module, noModuleIntro, modulePosition, templateThree }) => {
  const container = useRef(null);
  const [scrollX, setScrollX] = useState(0);
  const [scrollEnd, setScrollEnd] = useState(false);
  const [showButtons, setShowButtons] = useState(false);
  const { admin } = useContext(Context) || {};
  const updateButtons = (shift) => {
    setScrollEnd(
      Math.floor(container.current.scrollWidth - (container.current.scrollLeft + shift)) <=
        container.current.offsetWidth
    );
  };

  const scroll = (shift) => {
    container.current.scrollTo({
      left: container.current.scrollLeft + shift,
      behavior: 'smooth',
    });
    updateButtons(shift);
    setScrollX(scrollX + shift);
  };

  const onStopScrolling = () => {
    setScrollX(container.current.scrollLeft);
    updateButtons(0);
  };

  const onScroll = (scrollLeft) => {
    updateButtons(0);
    setScrollX(scrollLeft);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowButtons(container.current.scrollWidth > container.current.offsetWidth);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <ScrollX refTag={container} scroll stopScrolling={() => onStopScrolling()} onScroll={onScroll}>
      <div ref={container} className={styles.templateTwoScrollStyle}>
        {module.items &&
          module.items.map((item, index) =>
            admin ? (
              <div key={index} className={styles.container}>
                <AdminButton item={item} />
                <Item
                  key={index}
                  index={index}
                  item={item}
                  page={page}
                  module={module}
                  modulePosition={modulePosition}
                  itemPosition={index + 1}
                />
              </div>
            ) : (
              <Item
                key={index}
                index={index}
                item={item}
                page={page}
                module={module}
                modulePosition={modulePosition}
                itemPosition={index + 1}
              />
            )
          )}
        {showButtons && (
          <Buttons
            scroll={scroll}
            noModuleIntro={noModuleIntro}
            scrollX={scrollX}
            scrollEnd={scrollEnd}
            templateThree={templateThree}
          />
        )}
      </div>
    </ScrollX>
  );
};

CustomCarousel.propTypes = {
  page: PropTypes.shape({}),
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.shape({})),
    style: PropTypes.string,
  }).isRequired,
  noModuleIntro: PropTypes.bool,
  modulePosition: PropTypes.number,
  templateThree: PropTypes.bool
};

export default CustomCarousel;
