import { FC, useEffect, useRef, useState } from "react";
import { motion } from "motion/react";
import videoData from "@content/pages/video.json";
import playerIcon from "@/assets/icons/player.svg";
import { getMediaPath } from "@/utils/mediaImport";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
import { EASE_OUT_QUART } from "@/constants/ease";
import "./IntroVideo.scss";
import { useIntro } from "@/hooks/useIntro";

const containerVariants = {
    exit: {
        scaleY: 0,
        transition: {
            delay: 0.2,
            duration: 0.3,
            ease: [0.22, 1, 0.36, 1],
        },
    },
};

const contentVariants = {
    exit: {
        y: "100%",
        transition: {
            duration: 0.5,
            ease: [0.22, 1, 0.36, 1],
        },
    },
};

export const IntroVideo: FC = () => {
    const [isSkippable, setIsSkippable] = useState(false);
    const videoRef = useRef<HTMLVideoElement>(null);
    const { hasSeenIntro, setHasSeenIntro } = useIntro();

    const content = useContentWithTrad(videoData);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsSkippable(true);
        }, 3000);

        return () => clearTimeout(timer);
    }, []);

    const handleSkip = () => {
        if (videoRef.current) {
            videoRef.current.pause();
            setHasSeenIntro(true);
        }
    };

    const handleVideoEnd = () => {
        setHasSeenIntro(true);
    };

    if (hasSeenIntro) return null;

    return (
        <motion.div
            className="intro-video"
            variants={containerVariants}
            initial="visible"
            exit="exit">
            <motion.div
                variants={contentVariants}
                className="intro-video__content">
                <video
                    ref={videoRef}
                    className="intro-video__player"
                    autoPlay
                    muted
                    onEnded={handleVideoEnd}
                    src={getMediaPath(
                        `/src/assets/videos/introduction_04.mp4`,
                        "videos"
                    )}
                />
                {isSkippable && (
                    <motion.button
                        className="intro-video__skip"
                        onClick={handleSkip}
                        initial={{
                            x: "-50%",
                            opacity: 0,
                        }}
                        animate={{
                            x: 0,
                            opacity: 1,
                            transition: {
                                duration: 0.5,
                                ease: EASE_OUT_QUART,
                            },
                        }}
                        whileHover={{
                            translateX: 5,
                        }}
                        whileTap={{
                            scale: 1.1,
                        }}>
                        <span className="intro-video__skip-text">
                            {content.button}
                        </span>
                        <img
                            className="intro-video__skip-icon"
                            src={playerIcon}
                            alt="player"
                        />
                    </motion.button>
                )}
            </motion.div>
        </motion.div>
    );
};