import React from 'react';
import { Fade, Box, useScrollTrigger } from '@mui/material';

const ScrollTop = props => {
	const { children } = props;
	const trigger = useScrollTrigger({
		target: window ? window : undefined,
		disableHysteresis: true,
		threshold: 150,
	});

	const handleClick = event => {
		const anchor = (event.target.ownerDocument || document).querySelector(
			'.eniture_rtsq_wrapper'
		);
		window.scrollTo({
			top: anchor ? anchor.offsetTop + 20 : 0,
			behavior: 'smooth',
		});
	};

	return (
		<Fade in={trigger}>
			<Box
				onClick={handleClick}
				role='presentation'
				sx={{ position: 'fixed', bottom: 16, right: 16 }}>
				{children}
			</Box>
		</Fade>
	);
};

export default ScrollTop;