import { useState, useEffect } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';

import '../../../styles/graphics.css';

export default function BlogOrbitOnScroll() {
  const [currentPrecent, setCurrentPercent] = useState(null);
  const { scrollYProgress } = useScroll();

  const yRange = useTransform(scrollYProgress, [0, 1], [0, 50]);

  useEffect(
    () =>
      yRange.onChange(() => {
        setCurrentPercent(Math.trunc(yRange.current));
      }),
    [yRange],
  );

  // useEffect(() => {
  //   return scrollYProgress.onChange(v => {
  //     scrollYProgressPrecent = scrollYProgress.current * 100;
  //     currentPrecentCircle = 0 + scrollYProgressPrecent;
  //     currentPrecentTriangle = 50 + scrollYProgressPrecent;
  //     currentAngleTriangle = 30 + scrollYProgressPrecent;
  //   });
  // }, [scrollYProgress]);

  return (
    <div className="relative">
      <svg
        width="1557"
        height="729"
        viewBox="0 0 1557 729"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1529.95 344.604C1584.03 444.534 1549.23 537.389 1448.74 606.68C1348.28 675.953 1182.31 721.546 974.624 726.984C766.935 732.423 556.948 696.675 385.369 634.526C213.743 572.36 80.8265 483.897 26.7496 383.967C-27.3272 284.037 7.46898 191.182 107.957 121.891C208.417 52.6182 374.387 7.02553 582.076 1.58699C789.766 -3.85155 999.752 31.8963 1171.33 94.0452C1342.96 156.211 1475.87 244.675 1529.95 344.604Z"
          stroke="#BBBBBB"
          strokeWidth="2"
        />
      </svg>

      <motion.div
        className="circle-scroll"
        //initial={{ offsetDistance: currentPrecentCircle }}
        //animate={{ offsetDistance: scrollYProgress }}
        style={{ offsetDistance: `${currentPrecent + 0}%` }}
      >
        <svg
          width="33"
          height="33"
          viewBox="0 0 33 33"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.344 32.7837C27.1473 32.0173 33.6624 24.2595 32.896 15.4563C32.1296 6.65302 24.3719 0.137868 15.5686 0.90428C6.76536 1.67069 0.250206 9.42844 1.01662 18.2317C1.78303 27.035 9.54078 33.5501 18.344 32.7837Z"
            fill="#A1A3DD"
          />
        </svg>
      </motion.div>
      <motion.div
        className="triangle-scroll"
        //initial={{
        //  offsetDistance: currentPrecentTriangle,
        //  rotate: currentAngleTriangle,
        //}}
        //animate={{
        //  offsetDistance: scrollYProgress,
        //  rotate: currentAngleTriangle,
        //}}
        style={{
          offsetDistance: `${currentPrecent + 50}%`,
          rotate: currentPrecent * 10,
        }}
      >
        <svg
          width="51"
          height="49"
          viewBox="0 0 51 49"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1.22398 6.55725C-0.561572 3.87137 1.4026 0.285162 4.62731 0.343418L46.5505 1.10082C49.3473 1.15134 51.2299 3.98344 50.1938 6.58172L34.6645 45.5267C33.4699 48.5223 29.4033 48.9453 27.6179 46.2596L1.22398 6.55725Z"
            fill="#FFA463"
          />
        </svg>
      </motion.div>
    </div>
  );
}
