import styles from './TitleAndTextInRows.module.scss';
import { TITLESIZE, SUBTITLESIZE, TEXTPOSITION } from '../../models/common';
import { ThemeOverflow } from '../../redux/reducers/themeReducer/model';
import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { isInitialLoaderVisible } from '../../api/storage';
import { RootState } from '../../redux/store';
import AnimatedPhrase from '../AnimatedPhrase';
import { BlockTitleAndTextInRows } from '../../models/page';

export enum TitleAndTextInRowsSize {
  LARGE = 'large',
  MEDIUM = 'medium',
  SMALL = 'small',
}

export type Props = BlockTitleAndTextInRows;

interface State {
  overflow: ThemeOverflow;
  mounted: boolean;
}

const titleIntroVariants = {
  inactive: {
    opacity: 0,
    y: '50%',
  },
  active: (params: { delay: number; previousRoute: string }) => {
    return {
      opacity: 1,
      y: '0',
      transition: {
        duration: 0.7,
        delay: params.delay ? 6 + (params.previousRoute !== '' ? 1 : 0.2) : 0,
      },
    };
  },
};

const textIntroVariants = {
  inactive: {
    opacity: 0,
    y: '100%',
  },
  active: (params: { delay: number; previousRoute: string }) => {
    const _delay = params.delay
      ? 6 + (params.previousRoute !== '' ? 1 : 0.2)
      : 0;
    return {
      opacity: 1,
      y: '0',
      transition: {
        duration: 0.7,
        delay: _delay,
      },
    };
  },
};

const TitleAndTextInRows = (props: Props): JSX.Element => {
  const {
    title,
    titleAnimated = false,
    animated = false,
    text,
    titleSize = TITLESIZE.DEFAULT,
    textSize = SUBTITLESIZE.DEFAULT,
    textPosition = TEXTPOSITION.DEFAULT,
    blockSize = '',
    delay,
  } = props;
  const { isVisible, previousRoute } = useSelector((state: RootState) => ({
    ...state.initialLoader,
    ...state.router,
  }));
  const isLoaderVisible = isVisible || isInitialLoaderVisible();

  const [state, setState] = useState<State>({
    overflow: ThemeOverflow.HIDDEN,
    mounted: false,
  });

  useEffect(() => {
    if (state.mounted) {
      setState((preState) => ({
        ...preState,
        overflow: ThemeOverflow.VISIBLE,
      }));
    }
  }, [state.mounted]);

  useEffect(() => {
    if (!isLoaderVisible)
      setState((preState) => ({ ...preState, mounted: true }));
  }, [isLoaderVisible]);

  return (
    <div
      className={`${styles.titleAndTextInRows} ${styles[textPosition]} ${
        blockSize && styles[blockSize]
      }`}
    >
      <div className={styles.container}>
        <div className={styles.content}>
          {title && titleAnimated && (
            <div className={`${styles.title} ${titleSize}`}>
              <AnimatedPhrase phrase={title} />
            </div>
          )}
          {title && !titleAnimated && (
            <motion.div
              initial={animated ? false : 'active'}
              animate={
                animated
                  ? state.overflow === ThemeOverflow.HIDDEN || isLoaderVisible
                    ? 'inactive'
                    : 'active'
                  : false
              }
              variants={titleIntroVariants}
              custom={{ previousRoute, delay }}
            >
              <div className={`${styles.title} ${titleSize}`}>{title}</div>
            </motion.div>
          )}
          {text && (
            <motion.div
              initial={animated ? false : 'active'}
              animate={
                animated
                  ? !titleAnimated &&
                    (state.overflow === ThemeOverflow.HIDDEN || isLoaderVisible)
                    ? 'inactive'
                    : 'active'
                  : false
              }
              variants={textIntroVariants}
              custom={{ previousRoute, delay }}
              data-animated={animated}
            >
              <div
                className={`${textSize} ${styles.subTitle} ${
                  textSize === SUBTITLESIZE.LARGE ? styles.small : ''
                }`}
                dangerouslySetInnerHTML={{ __html: text }}
              />
            </motion.div>
          )}
        </div>
      </div>
    </div>
  );
};
export default TitleAndTextInRows;