import { motion } from 'framer-motion';
import { Fragment, useState } from 'react';
import Sentence from '../../Sentence';
import {
  MembersNthTerms,
  TeamMembersFormat as TeamMembersFormatI,
} from '../../../models/common';
import TeamListMember from './TeamListMember';
import styles from './../Team.module.scss';
import { useSelector } from 'react-redux';
import { RootState } from '../../../redux/store';
import { getMemberClassNames, getMembersNthTerms } from '../../../utils';

const teamVariation = {
  show: ({ delay }: { delay: boolean }) => ({
    marginTop: '0px',
    transition: {
      delay: 6.4 + (delay ? 0.8 : 0),
      ease: [0.19, 0.76, 0.05, 1],
      duration: 2,
    },
  }),
  hide: {
    marginTop: '100vh',
    transition: {
      delay: undefined,
    },
  },
};

const TeamList = (props: { data: TeamMembersFormatI[] }) => {
  const { data } = props;
  const [classNamesTerms] = useState<MembersNthTerms>(getMembersNthTerms(data));

  const { isVisible, previousRoute } = useSelector((state: RootState) => ({
    ...state.initialLoader,
    ...state.router,
  }));
  const [delayChildren] = useState(previousRoute !== '' ? true : false);

  return (
    <motion.div
      initial={'hide'}
      animate={!isVisible ? 'show' : false}
      variants={teamVariation}
      custom={{ delay: delayChildren }}
      className={styles.teamMembersContainer}
    >
      <div className={styles.container}>
        {classNamesTerms &&
          data?.map((teamMember, id) => {
            const memberClassNamesTerms = getMemberClassNames(
              teamMember,
              classNamesTerms,
              styles
            );
            return (
              <Fragment key={id}>
                {teamMember?.type === 'blockTeamMember' && (
                  <TeamListMember
                    index={teamMember.index}
                    id={id}
                    name={teamMember.name}
                    image={teamMember.image}
                    link={teamMember.link}
                    role={teamMember.role}
                    question={teamMember.question}
                    answer={teamMember.answer}
                    type={teamMember.type}
                    className={`${memberClassNamesTerms?.nthClass} ${memberClassNamesTerms?.evenClass} ${memberClassNamesTerms?.firstChildClass} ${memberClassNamesTerms?.thirdChildNthClass} ${memberClassNamesTerms?.mobileNthClass}`}
                  />
                )}
                {teamMember?.type === 'blockSentence' && (
                  <Sentence phrase={teamMember.phrase} />
                )}
              </Fragment>
            );
          })}
      </div>
    </motion.div>
  );
};

export default TeamList;