import { useRef } from 'react';
import { useEventListener } from 'hooks/useEventListener';

export const HorizontalScroll = ({
  children,
  ...props
}: {
  children: React.ReactNode;
}) => {
  const scrollRef = useRef<HTMLDivElement | null>(null);

  useEventListener(
    'wheel',
    (ev: WheelEvent) => {
      if (scrollRef.current && scrollRef.current.contains(ev.target as Node)) {
        if (ev.deltaY !== 0) {
          // const { scrollLeft, scrollWidth, offsetWidth } = scrollRef.current;
          // if (Math.ceil(scrollLeft) !== scrollWidth - offsetWidth) {
          //   ev.preventDefault();
          // }
          ev.preventDefault();
        }
      }
    },
    { passive: false }
  );

  const handleWheelEvent: React.WheelEventHandler = (ev) => {
    if (ev.deltaY !== 0 && ev.currentTarget.contains(ev.target as Node)) {
      const container = scrollRef.current;
      if (container) {
        container.scrollTo({
          top: 0,
          left: container.scrollLeft + ev.deltaY,
        });
      }
    }
  };

  return (
    <div
      className="h100 overflowAuto customScrollX"
      ref={scrollRef}
      onWheelCapture={handleWheelEvent}
      {...props}
    >
      {children}
    </div>
  );
};