import { motion, useAnimation } from 'framer-motion';
import Img from '../../../Image';
import { useState, useRef, useEffect } from 'react';
import { TeamMembersFormat as TeamMembersFormatI } from '../../../../models/common';
import { useMediaQuery } from 'react-responsive';

const variants: { [id: string]: any } = {
  stack: ({
    width = 342,
    rotate = 0,
    index = 0,
    zIndex = 0,
    isDesktop = false,
  }: {
    width: number;
    rotate: number;
    isDesktop: boolean;
    index: number;
    zIndex: number;
  }) => {
    return {
      rotate,
      position: 'fixed',
      top: '50%',
      left: '50%',
      translateX: '-50%',
      translateY: '-50%',
      translateZ: `0px`,
      zIndex: zIndex,
      display: 'none',
      width: isDesktop ? width : 300,
    };
  },
  active: ({
    stackDelay = 0,
    width = 342,
    isDesktop = false,
  }: {
    stackDelay: number;
    width: number;
    isDesktop: boolean;
  }) => {
    return {
      transition: {
        delay: stackDelay,
        duration: 0,
      },
      display: 'block',
      width: isDesktop ? width : 300,
    };
  },
  inactive: ({
    width = 342,
    delay = 0,
    top = 0,
    left = 0,
    isDesktop = false,
  }) => {
    return {
      position: 'fixed',
      rotate: 0,
      top: `${top}px`,
      left: `${left}px`,
      translateX: 0,
      translateY: 0,
      zIndex: 111,
      transition: {
        delay: delay,
        ease: [0.25, 0.76, 0.05, 1],
        duration: isDesktop ? 0.75 : 0.75,
      },
      transitionEnd: {
        display: 'none',
      },
      width: width,
    };
  },
  hide: () => {
    return {
      display: 'none',
      transition: {
        delay: 0.9,
        duration: 0,
      },
    };
  },
};

const TeamInitialAnimationMember = (props: TeamMembersFormatI): JSX.Element => {
  const {
    index,
    image,
    delay,
    stackDelay,
    zIndex,
    anim,
    className,
    rotate,
    onAnimationComplete,
  } = props;
  const [animate, setAnimate] = useState<string | false>('stack');
  const ref = useRef<HTMLDivElement>(null);
  const controls = useAnimation();
  const isDesktop = useMediaQuery({ query: '(min-width: 900px)' });
  useEffect(() => {
    const animMember = async () => {
      if (animate === 'stack') {
        await controls.start('active');
        setAnimate('active');
      }
      if (animate === 'active' && !anim) await controls.start('hide');
      if (onAnimationComplete && animate === 'inactive') onAnimationComplete();
      if (animate === 'active' && anim) {
        await controls.start('inactive');
        setAnimate('inactive');
      }
    };
    animMember();
  }, [animate, anim, onAnimationComplete, controls]);

  return (
    <div key={index} ref={ref} className={className}>
      {anim || animate ? (
        <motion.div
          key={index}
          custom={{
            rotate: rotate,
            width: ref.current?.getBoundingClientRect().width,
            delay: delay,
            stackDelay: stackDelay,
            top:
              (process.browser && window.innerHeight) ||
              0 + (ref.current?.getBoundingClientRect().top || 0),
            left: ref.current?.getBoundingClientRect().left,
            zIndex: zIndex,
            index: index,
            isDesktop,
          }}
          initial={'stack'}
          animate={controls}
          variants={variants}
        >
          <Img
            alt={image?.alt || ''}
            image={{
              ...image,
              width: 342,
              height: 389,
              loading: 'eager',
              priority: true,
            }}
          />
        </motion.div>
      ) : null}
      <div style={{ visibility: 'hidden' }}>
        <Img
          alt={image?.alt || ''}
          image={{
            ...image,
            width: 342,
            height: 389,
            loading: 'eager',
            priority: true,
          }}
        />
      </div>
    </div>
  );
};

export default TeamInitialAnimationMember;