import { useEffect } from 'react';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material';

import { useWidget } from 'hooks';

const Captcha = () => {
	const theme = useTheme();
	const { isInvalidCaptcha, renderCaptcha } = useWidget();

	useEffect(() => {
		const captchaContainer = document.querySelector(
			'.captcha-container'
		) as HTMLDivElement;

		if (import.meta.env.MODE === 'production' && captchaContainer) {
			renderCaptcha(captchaContainer);
		} else {
			captchaContainer.innerHTML = 'This is a captcha box';
			captchaContainer.style.border = '2px solid #000000';
			captchaContainer.style.height = '36px';
		}
	}, []);

	useEffect(() => {
		const _captchaContainer: HTMLElement | undefined =
			document.querySelector('.captcha-container') as HTMLElement;

		if (isInvalidCaptcha && _captchaContainer) {
			_captchaContainer.style.border = `2px solid ${theme.palette.error.main}`;
		}
	}, [isInvalidCaptcha]);

	return (
		<Box
			id='captcha-container'
			className='captcha-container'
			sx={{ width: '100%' }}
		></Box>
	);
};

export default Captcha;
