'use client';

import * as React from 'react';
import { motion, MotionValue, useScroll, useTransform } from 'motion/react';

import { cn } from '@/utils/cn';

type StretchingGradientProps = {
  className?: string;
  gradientClassName?: string;
  scrollGradientClassName?: string;
};

const DEFAULT_GRADIENT_CLASS_NAME =
  'bg-linear-to-t from-[#F5F5F5] via-[#92AEFF] to-[#96E7F9]';

const BAR_COUNT = 27;
const CENTER_INDEX = Math.floor(BAR_COUNT / 2);
const BAR_WIDTH = 'clamp(56px, 4.17vw, 80px)';
const START_Y = 720;
const BAR_OFFSETS = Array.from({ length: BAR_COUNT }, (_, index) =>
  Math.round(Math.abs(index - CENTER_INDEX) * 26.7),
);

export default function StretchingGradient({
  className,
  gradientClassName = DEFAULT_GRADIENT_CLASS_NAME,
  scrollGradientClassName,
}: StretchingGradientProps) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['0 0', '1 1'],
  });

  return (
    <div
      ref={containerRef}
      className={cn('relative h-[200vh] w-full bg-white', className)}
      style={{ gridColumn: 'full' }}
    >
      <div className='sticky top-0 h-screen w-full overflow-hidden bg-white'>
        <div className='absolute inset-x-0 top-0 h-[min(760px,82vh)] overflow-visible'>
          <div
            className='absolute top-0 left-1/2 flex h-full -translate-x-1/2 items-stretch'
            style={
              {
                '--bar-width': BAR_WIDTH,
                width: `calc(var(--bar-width) * ${BAR_COUNT})`,
              } as React.CSSProperties
            }
          >
            {BAR_OFFSETS.map((offset, index) => (
              <GradientBar
                key={index}
                index={index}
                finalY={offset}
                progress={scrollYProgress}
                gradientClassName={gradientClassName}
                scrollGradientClassName={scrollGradientClassName}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function GradientBar({
  gradientClassName,
  scrollGradientClassName,
  index,
  finalY,
  progress,
}: {
  gradientClassName: string;
  scrollGradientClassName?: string;
  index: number;
  finalY: number;
  progress: MotionValue<number>;
}) {
  const y = useTransform(
    progress,
    [0, 0.72, 1],
    [START_Y, finalY + 150, finalY],
  );
  const scrollGradientOpacity = useTransform(progress, [0.18, 0.86], [0, 1]);
  const baseGradientOpacity = useTransform(
    scrollGradientOpacity,
    [0, 1],
    [1, 0],
  );
  const opacity = 1 - Math.abs(index - CENTER_INDEX) * 0.006;

  return (
    <motion.div
      aria-hidden='true'
      className='relative h-full shrink-0 overflow-hidden will-change-transform'
      style={{
        y,
        width: 'var(--bar-width)',
        opacity,
      }}
    >
      <motion.div
        className={cn('absolute inset-0', gradientClassName)}
        style={{ opacity: scrollGradientClassName ? baseGradientOpacity : 1 }}
      />
      {scrollGradientClassName ? (
        <motion.div
          className={cn(
            'absolute inset-0 blur-2xl transition-opacity duration-300 hover:brightness-105',
            scrollGradientClassName,
          )}
          style={{ opacity: scrollGradientOpacity }}
        />
      ) : null}
    </motion.div>
  );
}