import styles from './CapabilitiesIntroDetail.module.scss';
import { useEffect, useState } from 'react';
import CapabilitiesHeart from './CapabitiliesHeart';
import CapabilitiesArrows from './CapabilitiesArrows';
import CapabilitiesPieces from './CapabilitiesPieces';
import CapabilitiesPointer from './CapabilitiesPointer';
import CapabilitiesSettings from './CapabilitiesSettings';
import CapabilitiesWorld from './CapabilitiesWorld';
import AnimatedPhrase from '../AnimatedPhrase';
import { useSelector } from 'react-redux';
import { isInitialLoaderVisible } from '../../api/storage';
import { RootState } from '../../redux/store';

export enum SvgImageTypes {
  ARROWSSLASH = 'arrowsSlash',
  HEART = 'heart',
  PIECES = 'pieces',
  POINTER = 'pointer',
  SETTINGS = 'settings',
  WORLD = 'world',
}

export enum AnimationVariations {
  DEFAULT = 'default',
  SHOW = 'show',
}

interface SvgImagesProps {
  variant: AnimationVariations;
}
interface SvgImages {
  [key: string]: (props: SvgImagesProps) => JSX.Element;
}

const svgImages: SvgImages = {
  // eslint-disable-next-line react/display-name
  arrowsSlash: (props): JSX.Element => <CapabilitiesArrows {...props} />,
  // eslint-disable-next-line react/display-name
  heart: (props) => <CapabilitiesHeart {...props} />,
  // eslint-disable-next-line react/display-name
  pieces: (props) => <CapabilitiesPieces {...props} />,
  // eslint-disable-next-line react/display-name
  pointer: (props) => <CapabilitiesPointer {...props} />,
  // eslint-disable-next-line react/display-name
  settings: (props) => <CapabilitiesSettings {...props} />,
  // eslint-disable-next-line react/display-name
  world: (props) => <CapabilitiesWorld {...props} />,
};

export type Props = {
  extraInfo: string;
  title: string;
  subTitle: string;
  svgImageType: SvgImageTypes;
};

const CapabilitiesIntroDetail = (props: Props): JSX.Element => {
  const { extraInfo, title, subTitle, svgImageType } = props;
  const [variant, setVariant] = useState(AnimationVariations.DEFAULT);
  const { isVisible } = useSelector((state: RootState) => ({
    ...state.initialLoader,
  }));
  const isLoaderVisible = !isVisible || !isInitialLoaderVisible();
  const [mounted, setMounted] = useState(false);
  const Component = svgImages[svgImageType];

  useEffect(() => {
    if (mounted)
      window.requestAnimationFrame(() => {
        setVariant(AnimationVariations.SHOW);
      });
  }, [mounted]);

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

  return (
    <div className={styles.capabilitiesIntroDetail}>
      <div className={styles.container}>
        <Component variant={variant} />
        <div className={`text_5 ${styles.introText}`}>
          <AnimatedPhrase phrase={extraInfo} />
        </div>
        <div className={styles.title}>
          <AnimatedPhrase phrase={title} />
        </div>
        <div className={`text_1 ${styles.subTitle}`}>
          <AnimatedPhrase phrase={subTitle} />
        </div>
      </div>
    </div>
  );
};
export default CapabilitiesIntroDetail;