import { motion, useInView, useMotionValue, useSpring } from 'framer-motion';
import { Title } from './ui/Title';
import { useEffect, useRef } from 'react';
import { IStatisticsItem } from '../types/IStatisticsItem';
import { statistics } from '../consts/statistics';

export function Statistics() {
  return (
    <div className="lg:space-y-20 sm:space-y-10 space-y-8 sm:border-b border-[#3D425C] lg:pt-16 pt-12">
      <Title>
        За 15 лет работы cоздали более <br />
        <span className="text-gradient"> 250 интерактивных проектов </span>с 3D
        графикой
      </Title>
      <div className="lg:py-24 sm:py-10 flex lg:gap-x-4 sm:gap-x-0.5 items-end max-sm:hidden">
        {statistics.map(stat => (
          <Figure key={stat.title} {...stat} />
        ))}
      </div>
      <div className="flex flex-col gap-y-0.5 sm:hidden">
        {statistics.map(stat => (
          <MobileFigure key={stat.title} {...stat} />
        ))}
      </div>
    </div>
  );
}

function Figure({ color, percents, height, title }: IStatisticsItem) {
  const percentsValue = useMotionValue<number>(0);
  const percentsSpringValue = useSpring(percentsValue, {
    damping: 100,
    stiffness: 100,
  });

  const columnHeightValue = useMotionValue<number>(0);
  const columnHeightSpringValue = useSpring(columnHeightValue, {
    damping: 100,
    stiffness: 100,
  });

  const figureRef = useRef<HTMLParagraphElement>(null);
  const columnRef = useRef<HTMLDivElement>(null);
  const root = useRef<HTMLDivElement>(null);

  const inView = useInView(root);

  useEffect(() => {
    if (inView) {
      percentsValue.set(percents);
    }
  }, [percentsValue, inView, percents]);

  useEffect(() => {
    percentsSpringValue.on('change', prev => {
      if (figureRef.current) {
        figureRef.current.textContent = prev.toFixed(0);
      }
    });
  }, [figureRef, percentsSpringValue]);

  useEffect(() => {
    if (inView) {
      columnHeightValue.set(height);
    }
  }, [height, columnHeightValue, inView]);

  useEffect(() => {
    columnHeightSpringValue.on('change', prev => {
      if (columnRef.current) {
        columnRef.current!.style.height = `${prev}px`;
      }
    });
  }, [columnHeightSpringValue, columnRef, percentsSpringValue]);

  return (
    <motion.div
      ref={root}
      className="relative flex flex-col gap-y-2 justify-end w-full h-[400px]"
    >
      <p className="font-medium text-center h4" style={{ color }}>
        {title}
      </p>
      <motion.div
        ref={columnRef}
        className="border-t-[5px] transition-[height]"
        style={{
          borderColor: color,
          background: `linear-gradient(${color}33,#798FFF00)`,
        }}
      />
      <p
        ref={figureRef}
        className="text-[clamp(64px,64px+(100vw-640px)/960*32,96px)] font-medium absolute self-center bottom-6 leading-none"
      >
        {percents}
      </p>
    </motion.div>
  );
}

function MobileFigure({
  color,
  percents,
  widthPercents,
  title,
}: IStatisticsItem) {
  const percentsValue = useMotionValue<number>(0);
  const percentsSpringValue = useSpring(percentsValue, {
    damping: 100,
    stiffness: 100,
  });

  const rowWidthValue = useMotionValue<number>(0);
  const rowWidthSpringValue = useSpring(rowWidthValue, {
    damping: 100,
    stiffness: 100,
  });

  const figureRef = useRef<HTMLParagraphElement>(null);
  const rowRef = useRef<HTMLDivElement>(null);
  const root = useRef<HTMLDivElement>(null);

  const inView = useInView(root);

  useEffect(() => {
    if (inView) {
      percentsValue.set(percents);
    }
  }, [percentsValue, inView, percents]);

  useEffect(() => {
    percentsSpringValue.on('change', prev => {
      if (figureRef.current) {
        figureRef.current.textContent = prev.toFixed(0);
      }
    });
  }, [figureRef, percentsSpringValue]);

  useEffect(() => {
    if (inView) {
      rowWidthValue.set(widthPercents);
    }
  }, [widthPercents, rowWidthValue, inView]);

  useEffect(() => {
    rowWidthSpringValue.on('change', prev => {
      if (rowRef.current) {
        rowRef.current!.style.width = `${prev}%`;
      }
    });
  }, [rowWidthSpringValue, rowRef, percentsSpringValue]);
  return (
    <motion.div
      ref={root}
      className="h-[220px]s relative space-y-1 py-4 pl-[5px]"
    >
      <motion.div
        ref={rowRef}
        className="absolute left-0 top-0 border-r-[5px] transition-[width] h-full"
        style={{
          borderColor: color,
          background: `linear-gradient(to left,${color}33,#798FFF00)`,
        }}
      />
      <p
        ref={figureRef}
        className="text-[64px] font-medium self-center leading-none"
      >
        {percents}
      </p>
      <p className="font-medium h4" style={{ color }}>
        {title}
      </p>
    </motion.div>
  );
}
