import { useEffect } from "react";
import { cubicBezier, m, useAnimate } from "framer-motion";

import styles from "./styles.module.scss";

interface KeyholeAnimationProps {
  startAnimation?: boolean;
}

export default function KeyholeAnimation({
  startAnimation = false,
}: KeyholeAnimationProps) {
  const [scope, animate] = useAnimate();

  useEffect(() => {
    const animationSequence = async () => {
      if (startAnimation && scope.current) {
        // Initial
        if (scope.current)
          await Promise.all([
            animate("#logo-top", { x: "100%" }, { duration: 0.1 }), // From right
            animate("#logo-bottom", { x: "-100%" }, { duration: 0.1 }), // From left
            animate("#logo-group", { scale: 1 }, { duration: 0.1 }),
          ]);
        // Fade out overlay
        if (scope.current)
          await animate(
            "#overlay",
            { opacity: 0 },
            { duration: 0.1, delay: 0.3 },
          );

        if (scope.current)
          await Promise.all([
            // Move logo halves to center
            animate(
              "#logo-top",
              { x: "0%" },
              { duration: 1.0, ease: cubicBezier(0.16, 1, 0.5, 1) },
            ),
            animate(
              "#logo-bottom",
              { x: "0%" },
              { duration: 1.0, ease: cubicBezier(0.16, 1, 0.5, 1) },
            ),
            // Scale up
            animate(
              "#logo-group",
              { scale: [1, 50] },
              { duration: 1.25, ease: cubicBezier(1.0, 0, 0.5, 1), delay: 0.5 },
            ),
          ]);

        // Hide mask after intro animation
        if (scope.current)
          await animate("#mask-container", { opacity: 0 }, { duration: 0 });
      }
    };

    animationSequence();
  }, [scope, animate, startAnimation]);

  return (
    <div ref={scope} className={styles.keyholeAnimation}>
      <m.div id="overlay" className={styles.overlay} />
      <m.div className={styles.logoAnimationWrapper} id="mask-container">
        <svg
          className={styles.logoAnimation}
          width="100%"
          height="100%"
          viewBox="0 0 1440 920"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
        >
          <defs>
            <mask id="mask">
              <rect width="100%" height="100%" fill="white" />
              <m.g id="logo-group" className={styles.logoGroup}>
                <m.path
                  id="logo-top"
                  d="M820 451 C820 395 792 350 758 350 C723 350 695 395 695 451 H820 Z"
                  fill="black"
                />
                <m.path
                  id="logo-bottom"
                  d="M745 450 C745 505 717 550 683 550 C648 550 620 505 620 450 H745 Z"
                  fill="black"
                />
              </m.g>
            </mask>
          </defs>
          <rect
            className={styles.background}
            width="100%"
            height="100%"
            mask="url(#mask)"
          />
        </svg>
      </m.div>
    </div>
  );
}