import { useTranslations } from 'next-intl';
import { useTheme } from '@mui/material/styles';
import { Snackbar, SnackbarContent } from '@mui/material';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/redux/store';
import { clearAlert } from '@/redux/features/alert-slice'

export default function Alert({ payload } : any ) {

    const dispatch = useDispatch<AppDispatch>()
    const t = useTranslations('Common');
    const theme = useTheme();

    function handleClose() {
      dispatch(clearAlert());
    }

    // If success is null so dont mount the snackbar ( there is no need for an alert )
    if(payload.success == null) return

    return (
        <>        
            <Snackbar
                open={payload.message ? true : false}
                onClose={handleClose}
                autoHideDuration={3000} //Todo make a global settings for this things
            >
                <SnackbarContent
                    sx={{
                        backgroundColor: payload.success == true ? theme.palette.success.main : theme.palette.error.main,
                        color: 'white',
                    }}
                    message={<div className="font-tajawal">{t(`${payload.message}`)}</div>}
                />
            </Snackbar>
        </>
    )
}