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

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

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

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: {
            x: 0,
            y: 0,
            opacity: 0,
            scale: 0,
        },
        to: {
            x: 0,
            y: 0,
            opacity: 1,
            scale: 1,
            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);
        }
    };

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

    return (
        <div
        // className="demo"
        // onPointerEnter={() => {
        //     handleClick();
        // }}
        >
            {/* style={{
          width: "50px",
          height: "50px",
          backgroundColor: "#ff6d6d",
          borderRadius: "4px",
          ...springs,
        }} */}
            <animated.div
                style={{
                    // display: 'inline-block',
                    // transform: 'translate(50px, 50px)',
                    ...springs,
                }}>
                {children}
            </animated.div>
            {/* <Button
        onClick={handleClick}
        sx={{ marginTop: "100px" }}
        variant="contained"
      >
        Animate
      </Button> */}
        </div>
    );
}
