import { ValidationSelectors, useValidationDispatch } from '@greenpay/redux'
import { Alert, Snackbar } from '@mui/material'
import { useSelect } from '@wordpress/data'

const GreenPayToast: React.FC = () => {
	const { hideSnackbar } = useValidationDispatch()
	const snackbarOpen = useSelect(
		(select) => (select('green-pay/validation') as ValidationSelectors).getSnackbarOpen(),
		[],
	)
	const snackbarMessage = useSelect(
		(select) => (select('green-pay/validation') as ValidationSelectors).getSnackbarMessage(),
		[],
	)

	const handleClose = () => {
		hideSnackbar()
	}

	return (
		<Snackbar
			open={snackbarOpen}
			autoHideDuration={6000}
			onClose={handleClose}
			anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
			sx={{ zIndex: 2147483646 }}
		>
			<Alert onClose={handleClose} severity="error" variant="filled" sx={{ width: '100%' }}>
				{snackbarMessage}
			</Alert>
		</Snackbar>
	)
}

export default GreenPayToast
