import React from 'react'
import { Grow, Fade, Slide, Button, Snackbar } from '@mui/material'

function SlideTransition(props) {
    return <Slide {...props} direction="up" />
}

function GrowTransition(props) {
    return <Grow {...props} />
}

export default function TransitionsSnackbar() {
    const [state, setState] = React.useState({
        open: false,
        Transition: Fade,
    })

    const handleClick = (Transition) => () => {
        setState({
            open: true,
            Transition,
        })
    }

    function handleClose() {
        setState({
            ...state,
            open: false,
        })
    }

    return (
        <div>
            <Button onClick={handleClick(GrowTransition)}>
                Grow Transition
            </Button>
            <Button onClick={handleClick(Fade)}>Fade Transition</Button>
            <Button onClick={handleClick(SlideTransition)}>
                Slide Transition
            </Button>
            <Snackbar
                open={state.open}
                onClose={handleClose}
                TransitionComponent={state.Transition}
                ContentProps={{
                    'aria-describedby': 'message-id',
                }}
                message={<span id="message-id">I love snacks</span>}
            />
        </div>
    )
}
