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

interface Props {
    friction: number;
    tension: number;
    mass: number;
    children: React.ReactNode;
}

export default function SpringAnimationPreview({ friction, tension, mass, children }: Props) {
    const [springs, api] = useSpring(
        () => ({
            from: {
                x: 0,
                y: 0,
                opacity: 1,
                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,
                },
            },
            {
                opacity: 0,
                scale: 0,
                x: 0,
                y: 0,
                config: {
                    duration: 500,
                    easing: easings.easeInOutCubic,
                },
            },
        ],
    };

    const bounceConfig = {
        from: {
            x: -50,
            y: 0,
        },
        to: [
            {
                x: 50,
                y: 0,
                config: {
                    tension: tension,
                    friction: friction,
                    mass: mass,
                },
            },
            {
                x: -50,
                y: 0,
                config: {
                    duration: 500,
                    easing: easings.easeInOutCubic,
                },
            },
        ],
    };

    const animate = () => {
        api.start(bounceConfig);
    };

    useEffect(() => {
        animate();
    }, []);

    return (
        <div
            style={{
                width: '200px',
                height: '150px',
                borderRadius: '4px',
                border: '1px solid #696969',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
            onPointerEnter={() => {
                animate();
            }}>
            {/* style={{
          width: "50px",
          height: "50px",
          backgroundColor: "#ff6d6d",
          borderRadius: "4px",
          ...springs,
        }} */}
            <animated.div
                style={{
                    ...springs,
                }}>
                {children}
            </animated.div>
        </div>
    );
}