import React, { useEffect, useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { useLocation } from 'umi';
import './index.less';

export interface PageTransitionProps {
    children: React.ReactNode;
    type?: 'fade' | 'slide' | 'scale';
    duration?: number;
    className?: string;
}

const PageTransition: React.FC<PageTransitionProps> = ({
    children,
    type = 'fade',
    duration = 300,
    className = '',
}) => {
    const location = useLocation();
    const [displayLocation, setDisplayLocation] = useState(location);
    const [transitionStage, setTransitionStage] = useState('fadeIn');

    useEffect(() => {
        if (location !== displayLocation) setTransitionStage('fadeOut');
    }, [location, displayLocation]);

    return (
        <div className={`page-transition ${type}-transition ${className}`}>
            <div
                className={`transition-content ${transitionStage}`}
                onAnimationEnd={() => {
                    if (transitionStage === 'fadeOut') {
                        setDisplayLocation(location);
                        setTransitionStage('fadeIn');
                    }
                }}
            >
                {children}
            </div>
        </div>
    );
};

// 简化版本 - 禁用所有动画
export const SimplePageTransition: React.FC<{
    children: React.ReactNode;
    className?: string;
    enableAnimation?: boolean;
    onAnimationEnd?: () => void;
}> = ({
    children,
    className = '',
    enableAnimation = false, // 强制禁用动画
    onAnimationEnd,
}) => {
        // 立即执行回调，不等待动画
        const handleAnimationEnd = () => {
            if (onAnimationEnd) {
                onAnimationEnd();
            }
        };

        // 立即执行动画结束回调
        React.useEffect(() => {
            if (onAnimationEnd) {
                onAnimationEnd();
            }
        }, [onAnimationEnd]);

        return (
            <div className={`simple-page-transition ${className}`}>
                {children}
            </div>
        );
    };

export default PageTransition;