import React, { useState } from "react"
import { Grid, Typography, Snackbar } from "@material-ui/core"
import Alert from "@material-ui/lab/Alert"

import useStyles from "@/components/NotificationBar/styles"

import SocketService from "@/services/socket"

import Device from "@/utils/device"

const NotificationBar: React.FC = () => {
	const [opened, setOpened] = useState(false)

	const classes = useStyles({ opened })

	SocketService.on("connect", () => {
		setOpened(false)
	})

	SocketService.on("disconnect", () => {
		setOpened(true)
	})

	const message = "Your disconnected. Reconnecting..."

	if (Device.isMobile) {
		return (
			<Snackbar
				open={opened}
				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
			>
				<Alert severity="error">
					{message}
				</Alert>
			</Snackbar>
		)
	}

	return (
		<Grid
			container
			alignItems="center"
			justify="center"
			className={classes.container}
		>
			<Typography
				variant="h2"
				color="textSecondary"
				className={classes.text}
			>
				{message}
			</Typography>
		</Grid>
	)
}

export default NotificationBar