import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } from './PageTransition.animations.js';

const PageTransition = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color = "bg-[var(--color-primary)]", className, parallax = true, onStart, onComplete, }) => {
    const [phase, setPhase] = useState("covered");
    const [completedPanels, setCompletedPanels] = useState(0);
    useEffect(() => {
        let cancelled = false;
        const loadPromise = new Promise((resolve) => {
            if (document.readyState === "complete") {
                resolve();
            }
            else {
                window.addEventListener("load", () => resolve(), { once: true });
            }
        });
        const delayPromise = new Promise((resolve) => {
            setTimeout(resolve, delay * 1000);
        });
        Promise.all([loadPromise, delayPromise]).then(() => {
            if (!cancelled) {
                setPhase("exit");
                setTimeout(() => {
                    if (!cancelled)
                        onStart === null || onStart === void 0 ? void 0 : onStart();
                }, 250);
            }
        });
        return () => {
            cancelled = true;
        };
    }, [delay]);
    useEffect(() => {
        if (type === "split" && completedPanels === 2) {
            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
        }
    }, [completedPanels, type, onComplete]);
    if (type === "split") {
        const axis = direction === "up" || direction === "down" ? "h" : "v";
        const splitVars = buildSplitVariants(axis, duration);
        return (jsxs(Fragment, { children: [children, jsxs("div", { className: "fixed inset-0 z-[9999] pointer-events-none", children: [jsx(motion.div, { className: cn(axis === "h"
                                ? "absolute inset-x-0 top-0 h-1/2"
                                : "absolute inset-y-0 left-0 w-1/2", color, className), variants: splitVars.panel1, initial: "covered", animate: phase, onAnimationComplete: (def) => {
                                if (def === "exit")
                                    setCompletedPanels((n) => n + 1);
                            } }), jsx(motion.div, { className: cn(axis === "h"
                                ? "absolute inset-x-0 bottom-0 h-1/2"
                                : "absolute inset-y-0 right-0 w-1/2", color, className), variants: splitVars.panel2, initial: "covered", animate: phase, onAnimationComplete: (def) => {
                                if (def === "exit")
                                    setCompletedPanels((n) => n + 1);
                            } }), logo && (jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none select-none", children: logo }))] })] }));
    }
    // Default: slide
    const curtainVariants = buildCurtainVariants(direction, duration);
    if (type === "slide" && parallax) {
        const logoVariants = buildLogoParallaxVariants(direction, duration);
        return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
                        if (def === "exit")
                            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
                    }, children: logo && (jsx(motion.div, { className: "relative z-10 select-none", variants: logoVariants, initial: "covered", animate: phase, children: logo })) })] }));
    }
    return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
                    if (def === "exit")
                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
                }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
};

export { PageTransition };
