import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { hideInitialVideo, isInitialVideoVisible } from '../../api/storage';
import { displayVideo } from '../../redux/reducers/initialVideoReducer/initialVideoActions';
import Video from '../Video';
import styles from './InitialVideo.module.scss';
import { motion, useAnimation } from 'framer-motion';
import close from '../../public/imgs/video-close.svg';

interface Props {
  onEnded?: () => void;
}

const InitialVideo = (props: Props) => {
  const dispatch = useDispatch();
  const [isVisible, setIsVisible] = useState(false);
  const controls = useAnimation();

  const closeVideo = () => {
    setIsVisible(false);
    hideInitialVideo();
    dispatch(displayVideo(false));
  };
  const { onEnded = closeVideo } = props;

  /* useEffect(() => {
    const _isInitialVideoVisible = isInitialVideoVisible();
    setIsVisible(_isInitialVideoVisible);
  }, []); */
  useEffect(() => {
    if (isVisible) {
      if (typeof window !== 'undefined') {
        // @ts-ignore
        window.gtag('event', 'login', { method: 'Google' });
        // @ts-ignore
        window.gtag('event', 'Play video', {
          event_category: 'Play',
          event_label: 'Video',
          value: 1,
          nonInteraction: true,
        });
      }
    }
  }, [isVisible]);

  useEffect(() => {
    document.body.classList.add('loading');
  }, []);

  return (
    <motion.div
      className={`${styles.container} ${!isVisible ? styles.hidden : ''}`}
      animate={controls}
      onAnimationComplete={() => {
        onEnded();
      }}
    >
      <button
        aria-label=""
        onClick={() => {
          if (typeof window !== 'undefined') {
            // @ts-ignore
            window.gtag('event', 'login', { method: 'Google' });
            // @ts-ignore
            window.gtag('event', 'Skip video', {
              event_category: 'Skip',
              event_label: 'Skip Video',
              value: 1,
            });
            window.scrollTo(0, 0);
            controls.start({
              opacity: 0,
            });
          }
        }}
      >
        <span>Skip to website</span>
        <svg>
          <use href={`${close.src}#close`}></use>
        </svg>
      </button>
      <div className={styles.content}>
        <Video
          video={{
            src: 'https://api.eae.pt/storage/uploads/media/eae-xmas-2021-1280-web.mp4',
            alt: '',
          }}
          loop={false}
          className={styles.video}
        />
        <div className={styles.text}>Turn your sound oh oh on!</div>
      </div>
    </motion.div>
  );
};

export default InitialVideo;