import React, { useEffect } from 'react';
import { animated, useSpring } from 'react-spring';
import { useTheme } from 'styled-components';
import { usePrevious } from '../hooks/';

type AnimatedHeartIconProps = {
  active: boolean;
  variant?: 'default' | 'light';
  scaleBy?: number;
  color?: string;
  width?: number;
  height?: number;
  onAnimationComplete?: () => void;
};

const STEP_DURATION_MS = 200;
export const TOTAL_DURATION_MS = STEP_DURATION_MS * 2;

const AnimatedHeartIcon = ({
  active,
  variant = 'default',
  color = '#000000',
  width = 24,
  height = 24,
  scaleBy = 1.4,
  onAnimationComplete,
}: AnimatedHeartIconProps) => {
  const { colors } = useTheme();
  const prevActive = usePrevious(active);

  useEffect(() => {
    if (active && !prevActive) {
      setTimeout(() => {
        onAnimationComplete?.();
      }, TOTAL_DURATION_MS);
    }
  }, [active, prevActive]);

  const fadeInAfterAnimationComplete = useSpring({
    opacity: active ? 1 : 0,
    delay: TOTAL_DURATION_MS,
    config: { duration: TOTAL_DURATION_MS },
  });

  const outlineAnimation = useSpring({
    fill: active
      ? colors.primary[variant === 'light' ? 400 : 700]
      : colors.neutral[600],
    config: { duration: STEP_DURATION_MS },
  });

  const growAnimationFirst = useSpring({
    transform: active ? 'scale(1)' : 'scale(0)',
    config: { duration: STEP_DURATION_MS },
  });

  const growAnimationSecond = useSpring({
    transform: active ? 'scale(1)' : 'scale(0)',
    delay: STEP_DURATION_MS,
    config: { duration: STEP_DURATION_MS },
  });

  const { keyframe } = useSpring({
    keyframe: active ? 1 : 0,
    delay: 0,
    config: { duration: active ? TOTAL_DURATION_MS : 0 },
  });

  return (
    <animated.svg
      width={width}
      height={height}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      style={{
        transformOrigin: '50% 50%',
        transform: keyframe
          .to([0, 0.3, 0.6, 1], [1, scaleBy, 1, 1])
          .to((x) => `scale(${x})`),
      }}
    >
      {!active ? (
        <path
          d="M16.5 2.82501C14.76 2.82501 13.09 3.63501 12 4.91501C10.91 3.63501 9.24 2.82501 7.5 2.82501C4.42 2.82501 2 5.24501 2 8.32501C2 12.105 5.4 15.185 10.55 19.865L12 21.175L13.45 19.855C18.6 15.185 22 12.105 22 8.32501C22 5.24501 19.58 2.82501 16.5 2.82501ZM12.1 18.375L12 18.475L11.9 18.375C7.14 14.065 4 11.215 4 8.32501C4 6.32501 5.5 4.82501 7.5 4.82501C9.04 4.82501 10.54 5.81501 11.07 7.18501H12.94C13.46 5.81501 14.96 4.82501 16.5 4.82501C18.5 4.82501 20 6.32501 20 8.32501C20 11.215 16.86 14.065 12.1 18.375Z"
          fill={color}
        />
      ) : (
        <>
          {/* First growing heart [lowest z-index] - don't show on the light variant */}
          {variant == 'default' && (
            <animated.path
              d="M12 21.175L10.55 19.855C5.4 15.185 2 12.105 2 8.32501C2 5.24501 4.42 2.82501 7.5 2.82501C9.24 2.82501 10.91 3.63501 12 4.91501C13.09 3.63501 14.76 2.82501 16.5 2.82501C19.58 2.82501 22 5.24501 22 8.32501C22 12.105 18.6 15.185 13.45 19.865L12 21.175Z"
              fill={colors.primary[500]}
              style={{ transformOrigin: '50% 50%' }}
              {...growAnimationFirst}
            />
          )}

          {/* Heart outline */}
          <animated.path
            d="M16.5 2.82501C14.76 2.82501 13.09 3.63501 12 4.91501C10.91 3.63501 9.24 2.82501 7.5 2.82501C4.42 2.82501 2 5.24501 2 8.32501C2 12.105 5.4 15.185 10.55 19.865L12 21.175L13.45 19.855C18.6 15.185 22 12.105 22 8.32501C22 5.24501 19.58 2.82501 16.5 2.82501ZM12.1 18.375L12 18.475L11.9 18.375C7.14 14.065 4 11.215 4 8.32501C4 6.32501 5.5 4.82501 7.5 4.82501C9.04 4.82501 10.54 5.81501 11.07 7.18501H12.94C13.46 5.81501 14.96 4.82501 16.5 4.82501C18.5 4.82501 20 6.32501 20 8.32501C20 11.215 16.86 14.065 12.1 18.375Z"
            {...outlineAnimation}
          />

          {/* Second growing heart */}
          <animated.path
            d="M12 21.175L10.55 19.855C5.4 15.185 2 12.105 2 8.32501C2 5.24501 4.42 2.82501 7.5 2.82501C9.24 2.82501 10.91 3.63501 12 4.91501C13.09 3.63501 14.76 2.82501 16.5 2.82501C19.58 2.82501 22 5.24501 22 8.32501C22 12.105 18.6 15.185 13.45 19.865L12 21.175Z"
            fill={colors.primary[variant === 'light' ? 500 : 700]}
            style={{ transformOrigin: '50% 50%' }}
            {...growAnimationSecond}
          />

          {/* Final filled heart [highest z-index] */}
          <animated.path
            d="M12 21.175L10.55 19.855C5.4 15.185 2 12.105 2 8.32501C2 5.24501 4.42 2.82501 7.5 2.82501C9.24 2.82501 10.91 3.63501 12 4.91501C13.09 3.63501 14.76 2.82501 16.5 2.82501C19.58 2.82501 22 5.24501 22 8.32501C22 12.105 18.6 15.185 13.45 19.865L12 21.175Z"
            fill={color}
            {...fadeInAfterAnimationComplete}
          />
        </>
      )}
    </animated.svg>
  );
};

export default AnimatedHeartIcon;