Fade in

'use client';

import { DURATION_S, EASE } from '@fastrp/design-tokens/motion';
import { type HTMLMotionProps, motion, useReducedMotion } from 'motion/react';
import { useScrollRoot } from '@/components/ds/scroll-root';

// @fast-ds [email protected]

export type FadeInProps = Omit<
  HTMLMotionProps<'div'>,
  'initial' | 'whileInView' | 'viewport' | 'animate'
> & {
  /** Where it comes from, in pixels at 1080p: `y` rises, `x` slides in from that side. */
  from?: { x?: number; y?: number };
  /** Seconds. */
  delay?: number;
  /** Seconds; `DURATION_S.slower` by default. */
  duration?: number;
  /** Play again every time it re-enters, instead of once. */
  repeat?: boolean;
};

/**
 * Fades a block into place the first time it scrolls into view. Under reduced motion it is a fade
 * with no travel.
 *
 * The travel is a CSS calc on `--fade` (1 → 0) times `--ui-px`, not motion's own `x`/`y`: an inline
 * transform in pixels would stay 1080p-sized in the FiveM NUI, which scales every length through
 * `--ui-px`. `transform`, not the `translate` property, which Chromium 103 lacks.
 */
function FadeIn({
  from = { y: 40 },
  delay = 0,
  duration = DURATION_S.slower,
  repeat = false,
  style,
  children,
  ...props
}: FadeInProps) {
  const reduceMotion = useReducedMotion();
  const root = useScrollRoot();
  const x = from.x ?? 0;
  const y = from.y ?? 0;

  return (
    <motion.div
      data-slot="fade-in"
      initial={{ opacity: 0, '--fade': reduceMotion ? 0 : 1 }}
      whileInView={{ opacity: 1, '--fade': 0 }}
      viewport={{ once: !repeat, margin: '0px 0px -10% 0px', root }}
      transition={{ duration, delay, ease: EASE }}
      style={{
        transform: `translate3d(calc(var(--fade, 0) * ${x} * var(--ui-px, 1px)), calc(var(--fade, 0) * ${y} * var(--ui-px, 1px)), 0)`,
        ...style,
      }}
      {...props}
    >
      {children}
    </motion.div>
  );
}

export { FadeIn };