import { motion } from 'framer-motion';
import { useMediaQuery } from 'react-responsive';
import styles from './SubmitLoader.module.scss';

const submitVariants = {
  initial: {
    transition: {
      staggerChildren: 0.114,
      staggerDirection: -1,
    },
  },
  loading: {
    transition: {
      staggerChildren: 0.114,
    },
  },
};

const submitContainerVariants = {
  initial: ({ isDesktop }: { isDesktop: boolean }) => {
    const width = isDesktop ? '94px' : '68px';
    const duration = isDesktop ? 0.754 : 0.65;
    const delay = isDesktop ? 0 : 0.15;
    return {
      width,
      transition: {
        duration,
        delay,
      },
    };
  },
  loading: ({ isDesktop }: { isDesktop: boolean }) => {
    const width = isDesktop ? '162px' : '124px';
    const duration = isDesktop ? 0.654 : 0.45;
    return {
      width,
      transition: {
        duration,
        /* ease: 'linear', */
        ease: 'easeInOut',
      },
    };
  } /* {
      width: '156px',
      transition: {
        duration: 0.55,
      },
    }, */,
};

const variants = {
  initial: {
    y: '100%',
    opacity: 0,
    transition: {
      duration: 0.154,
    },
  },
  loading: {
    y: '0%',
    opacity: 1,
    transition: {
      duration: 0.154,
      ease: [0.09, 0.6, 0, 1],
    },
  },
};
export const SubmitLoader = ({ loading = true }) => {
  const submitLabel = 'Submit';
  const submitLoadingSuffix = 'ting...';
  const isDesktop = useMediaQuery({ query: '(min-width: 560px)' });
  return (
    <motion.div
      variants={submitContainerVariants}
      custom={{ isDesktop: isDesktop }}
      animate={loading ? 'loading' : 'initial'}
      className={styles.submitContainerVariants}
    >
      <div className={styles.loaderLetters}>
        {[...submitLabel].map((letter: string, id: number) => (
          <span key={id} style={{ display: 'inline-block' }}>
            {letter}
          </span>
        ))}
        <motion.div
          variants={submitVariants}
          animate={loading ? 'loading' : 'initial'}
          className={styles.loaderLettersContainer}
        >
          {[...submitLoadingSuffix].map((letter: string, id: number) => (
            <motion.span
              key={id + submitLabel?.length - 1}
              variants={variants}
              style={{ display: 'inline-block' }}
            >
              {letter}
            </motion.span>
          ))}
        </motion.div>
      </div>
    </motion.div>
  );
};