import styles from './TeamInitialAnimation.module.scss';
import teamStyles from '../Team.module.scss';
import {
  MembersNthTerms,
  TeamMembersFormat as TeamMembersFormatI,
} from '../../../models/common';
import TeamInitialAnimationMember from './TeamInitialAnimationMember';
import { useSelector } from 'react-redux';
import { RootState } from '../../../redux/store';
import { useEffect, useState } from 'react';
import {
  createArrayWithRandomValues,
  getMemberClassNames,
  getMembersNthTerms,
  shuffleArray,
} from '../../../utils';

interface Props {
  data: TeamMembersFormatI[];
}

const TeamInitialAnimation = (props: Props) => {
  const { data } = props;

  const [mounted, setMounted] = useState(false);
  const [members, setMembers] = useState<TeamMembersFormatI[]>([]);

  const { isVisible, previousRoute } = useSelector((state: RootState) => ({
    ...state.initialLoader,
    ...state.router,
  }));
  const [delayChildren] = useState(previousRoute !== '' ? true : false);
  const [classNamesTerms] = useState<MembersNthTerms>(getMembersNthTerms(data));
  const rotate = createArrayWithRandomValues(members.length, -10, 10);

  useEffect(() => {
    if (mounted)
      setMembers(
        shuffleArray(
          data.filter((entry) => entry.type === 'blockTeamMember')
        ) || []
      );
  }, [mounted]);

  useEffect(() => {
    if (members) {
      window.history.scrollRestoration = 'manual';
      document.body.classList.add('hidden');
    }
    return () => {
      window.history.scrollRestoration = 'auto';
      document.body.classList.remove('hidden');
    };
  }, [members]);

  useEffect(() => {
    if (!isVisible) setMounted(true);
  }, [isVisible]);

  return members?.length && mounted ? (
    <div className={styles.container + ' '}>
      <div className={teamStyles.teamMembersContainer}>
        <div className={styles.content + ' ' + teamStyles.container}>
          {members.map((member, id) => {
            const memberClassNamesTerms = getMemberClassNames(
              { ...member, id: id + 1 },
              classNamesTerms,
              teamStyles
            );
            return (
              <TeamInitialAnimationMember
                key={id}
                index={member.index}
                image={member.image}
                stackDelay={((delayChildren && 0.7) || 0) + 3 - id * 0.15}
                delay={(id + 1.4) * 0.6}
                zIndex={members.length - 1 - (id || 0)}
                anim={id <= 5}
                onAnimationComplete={
                  id === 5
                    ? () => {
                        document.body.classList.remove('hidden');
                      }
                    : undefined
                }
                type={member.type}
                rotate={rotate[id]}
                className={`${teamStyles.teamMembercontainer} ${memberClassNamesTerms?.nthClass} ${memberClassNamesTerms?.evenClass} ${memberClassNamesTerms?.firstChildClass} ${memberClassNamesTerms?.thirdChildNthClass} ${memberClassNamesTerms?.mobileNthClass}`}
              />
            );
          })}
        </div>
      </div>
    </div>
  ) : null;
};

export default TeamInitialAnimation;