import { Button } from '@mui/material';
import { useSpring, animated, easings, to } from '@react-spring/web';
import React, { useEffect, useState } from 'react';
import { PresEffectDirection } from './PresEnums';

export enum EffectType {
    ZOOM = 'zoom',
    FADE = 'fade',
    BOUNCE = 'bounce',
    ROTATE = 'rotate',
}

interface Props {
    dir: PresEffectDirection;
    effectType: EffectType;
    friction: number;
    tension: number;
    mass: number;
    children: React.ReactNode;
}

// TODO: add visibility detector when the slide comes into view
export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
    const [springs, api] = useSpring(
        () => ({
            from: {
                x: 0,
                y: 0,
                opacity: 0,
                scale: 1,
            },
            config: {
                tension: tension,
                friction: friction,
                mass: mass,
            },
            onStart: () => {
                console.log('started');
            },
            onRest: () => {
                console.log('resting');
            },
        }),
        [tension, friction, mass]
    );

    //   Whether the animation is currently playing
    const [animating, setAnimating] = useState(false);

    const zoomConfig = {
        from: {
            scale: 0,
            x: 0,
            y: 0,
            opacity: 1,
            // opacity: 0,
        },
        to: {
            scale: 1,
            x: 0,
            y: 0,
            opacity: 1,
            // opacity: 1,
            config: {
                tension: tension,
                friction: friction,
                mass: mass,
            },
        },
    };

    const fadeConfig = {
        from: {
            opacity: 0,
            scale: 1,
            x: 0,
            y: 0,
        },
        to: {
            opacity: 1,
            scale: 1,
            x: 0,
            y: 0,
            config: {
                tension: tension,
                friction: friction,
                mass: mass,
            },
        },
    };

    const rotateConfig = {
        from: {
            x: 0,
        },
        to: {
            x: 360,
            config: {
                tension: tension,
                friction: friction,
                mass: mass,
            },
        },
    };

    const getBounceConfigFrom = () => {
        switch (dir) {
            case PresEffectDirection.Left:
                return {
                    from: {
                        opacity: 0,
                        x: -200,
                        y: 0,
                    },
                };
            case PresEffectDirection.Right:
                return {
                    from: {
                        opacity: 0,
                        x: 200,
                        y: 0,
                    },
                };
            case PresEffectDirection.Top:
                return {
                    from: {
                        opacity: 0,
                        x: 0,
                        y: -200,
                    },
                };
            case PresEffectDirection.Bottom:
                return {
                    from: {
                        opacity: 0,
                        x: 0,
                        y: 200,
                    },
                };
            default:
                return {
                    from: {
                        opacity: 0,
                        x: 0,
                        y: 0,
                    },
                };
        }
    };

    const bounceConfig = {
        ...getBounceConfigFrom(),
        to: [
            {
                opacity: 1,
                x: 0,
                y: 0,
                config: {
                    tension: tension,
                    friction: friction,
                    mass: mass,
                },
            },
        ],
    };

    const handleClick = () => {
        if (effectType === EffectType.BOUNCE) {
            api.start(bounceConfig);
        } else if (effectType === EffectType.ZOOM) {
            api.start(zoomConfig);
        } else if (effectType === EffectType.ROTATE) {
            api.start(rotateConfig);
        } else if (effectType === EffectType.FADE) {
            api.start(fadeConfig);
        }
    };

    useEffect(() => {
        setTimeout(() => {
            handleClick();
        }, 200);
    }, []);

    return (
        <div
        // className="demo"
        // onPointerEnter={() => {
        //     handleClick();
        // }}
        >
            {effectType !== EffectType.ROTATE ? (
                <animated.div
                    style={{
                        // display: 'inline-block',
                        // transform: 'translate(50px, 50px)',
                        ...springs,
                    }}>
                    {children}
                </animated.div>
            ) : (
                <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>
            )}
        </div>
    );
}