Marquee

'use client';

import {
  Children,
  type ComponentPropsWithoutRef,
  cloneElement,
  type ReactElement,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import { useIntersectionObserver } from '@/foundations/hooks/use-intersection-observer';
import { useTicker } from '@/foundations/hooks/use-ticker';
import { cn } from '@/lib/utils/classnames';

type DurationProp = number | ((contentLength: number) => number);

interface MarqueeProps extends ComponentPropsWithoutRef<'div'> {
  direction?: 'left' | 'right' | 'up' | 'down';
  paused?: boolean;
  duration?: DurationProp;
}

export const Marquee = ({
  direction: propDirection = 'left',
  paused = false,
  children,
  duration,
  style,
  className,
  ...props
}: MarqueeProps) => {
  const [numClones, setNumClones] = useState<number>(1);
  const [rootRef, { isIntersecting }] =
    useIntersectionObserver<HTMLDivElement>();

  const progress = useRef(0);
  const contentLength = useRef(0);
  const deferredResizeHandler = useRef<() => void>(null);

  const getDuration = useMemo(() => {
    if (typeof duration === 'number') return () => duration;
    if (typeof duration === 'function')
      return () => duration(contentLength.current);

    // default duration to 50ms per pixel
    return () => contentLength.current * 50;
  }, [duration]);

  const [axis, direction] = useMemo(() => {
    return [
      propDirection === 'up' || propDirection === 'down' ? 'y' : 'x',
      propDirection === 'up' || propDirection === 'left' ? 'normal' : 'reverse',
    ];
  }, [propDirection]);

  const ticker = useTicker((_timestamp, delta) => {
    if (deferredResizeHandler.current) {
      deferredResizeHandler.current();
      deferredResizeHandler.current = null;
    }

    const root = rootRef.current;
    if (!root) return;

    progress.current = (progress.current + delta / getDuration()) % 1 || 0;

    root.style.setProperty('--progress', progress.current.toString());
  });

  useEffect(() => {
    if (paused || !isIntersecting) {
      ticker.stop();
    } else if (isIntersecting) {
      ticker.start();
    }
  }, [ticker, paused, isIntersecting]);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    const content = [...root.children].filter(
      (child) => !child.hasAttribute('data-clone')
    );

    const getLength = (element: HTMLElement) => {
      return element.getBoundingClientRect()[axis === 'x' ? 'width' : 'height'];
    };

    const onResize = () => {
      const rootLength = getLength(root);
      const gap = Number(getComputedStyle(root).gap.replace('px', ''));
      const gapLength = Number.isNaN(gap) ? 0 : gap;

      contentLength.current = content.reduce(
        (acc, item) => acc + getLength(item as HTMLElement),
        0
      );

      const numClones = Math.ceil(rootLength / contentLength.current);
      setNumClones(numClones);

      root.style.setProperty(
        '--content-length',
        `${contentLength.current + gapLength * content.length}px`
      );
    };

    const resizeObserver = new ResizeObserver(() => {
      // if ticker is running, defer the resize handler to the next tick
      // otherwise, call the handler immediately
      if (ticker.paused) {
        onResize();
      } else {
        deferredResizeHandler.current = () => onResize();
      }
    });

    onResize();
    content.forEach((item) => {
      resizeObserver.observe(item);
    });

    return () => {
      resizeObserver.disconnect();
      deferredResizeHandler.current = null;
    };
  }, [axis, rootRef, ticker]);

  const transformedChildren = useMemo(() => {
    return Children.map(children, (child) => {
      if (typeof child === 'string' || typeof child === 'number') {
        return <span className="inline-block">{child}</span>;
      }

      return child;
    });
  }, [children]);

  return (
    <div
      ref={rootRef}
      role="marquee"
      aria-live="off"
      aria-atomic="false"
      {...props}
      className={cn(
        'box-content flex w-max overflow-hidden will-change-transform',
        '*:shrink-0 *:will-change-transform',
        axis === 'x' && 'flex-row *:translate-x-(--translate)',
        axis === 'y' && 'flex-col *:translate-y-(--translate)',
        className
      )}
      style={{
        ...style,
        '--translate': `calc((${direction === 'normal' ? '-1 * ' : '-1 + '}var(--progress,0)) * var(--content-length,0px))`,
      }}
    >
      {transformedChildren}
      {Array.from({ length: numClones }).map((_, index) =>
        Children.map(transformedChildren, (child) =>
          // biome-ignore lint/suspicious/noExplicitAny: expected
          cloneElement(child as ReactElement<any>, {
            key: index,
            'aria-hidden': 'true',
            'data-clone': '',
          })
        )
      )}
    </div>
  );
};