import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import TriangleButton from './TriangleButton';
import TestimonialCard from './TestimonialCard';

export default function HorizontalScroller()  {
  const scrollRef = useRef(null);
  const [isDisabledLeftButton, setIsDisabledLeftButton] = useState(true);
  const [isDisabledRightButton, setIsDisabledRightButton] = useState(false);

  const handleScroll = event => {
    if (!event.external) {
      if (scrollRef.current.scrollLeft === 0) {
        if (isDisabledLeftButton !== true) setIsDisabledLeftButton(true);
      } else {
        if (isDisabledLeftButton !== false) setIsDisabledLeftButton(false);
      }
      if (
        scrollRef.current.scrollWidth - scrollRef.current.scrollLeft ===
        scrollRef.current.clientWidth
      ) {
        if (isDisabledRightButton !== true) setIsDisabledRightButton(true);
      } else {
        if (isDisabledRightButton !== false) setIsDisabledRightButton(false);
      }
    }
  };

  const handleRight = () => {
    if (scrollRef.current.scrollLeft + 100 !== 0) {
      if (isDisabledLeftButton !== false) setIsDisabledLeftButton(false);
    }
    if (
      scrollRef.current.scrollWidth - scrollRef.current.scrollLeft - 50 <=
      scrollRef.current.clientWidth
    ) {
      if (isDisabledRightButton !== true) setIsDisabledRightButton(true);
    }
    scrollRef.current.scrollBy({ left: 200, behaviour: 'smooth' });
  };
  const handleLeft = () => {
    if (scrollRef.current.scrollLeft - 100 <= 0) {
      if (isDisabledLeftButton !== true) setIsDisabledLeftButton(true);
    }
    if (
      scrollRef.current.scrollWidth - scrollRef.current.scrollLeft + 50 !==
      scrollRef.current.clientWidth
    ) {
      if (isDisabledRightButton !== false) setIsDisabledRightButton(false);
    }
    scrollRef.current.scrollBy({ left: -100, behaviour: 'smooth' });
  };
  return (
      <>
        <div className="flex flex-row w-full justify-between items-center md:w-4/5 xl:w-3/5 z-20 max-w-custom">
        <div
            
            className="flex flex-row justify-center items-center"
          >
            <TriangleButton onClick={handleLeft} direction={'left'} disabled={isDisabledLeftButton}/>
          </div>
          <div
            className="w-[600px] overflow-hidden"
            ref={scrollRef}
            onScroll={handleScroll}
          >
            <div 
            className="flex flex-row gap-24  w-[2000px]">
            <TestimonialCard />
            <TestimonialCard />
            </div>
            
          </div>
          <div
            
            className="flex flex-row justify-center items-center"
          >
            <TriangleButton onClick={handleRight} direction={'right'} disabled={isDisabledRightButton}/>
          </div>
        </div>
      </>
  );
};

HorizontalScroller.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  containerStyle: PropTypes.any,
  listStyle: PropTypes.any,
  hideArrows: PropTypes.bool,
};

