import { useLocation, useNavigate } from 'react-router-dom';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';

import { LoadingButton } from 'components';
import { useWidget } from 'hooks';

const ProgressiveCapture = () => {
	const { user } = useWidget();
	const { pathname, search } = useLocation();
	const navigate = useNavigate();

	const params = new URLSearchParams(search);

	navigate(pathname, { replace: true });

	const userId = params.get('userId');

	if (userId) {
		// getUser();

		if (user) {
			return (
				<>
					<Box sx={{ width: '100%' }}>
						{!user?.given_name && (
							<TextField
								id='given-name'
								autoCapitalize='words'
								autoComplete='given-name'
								label='First name'
								fullWidth
								value={user?.given_name}
								autoFocus
								required
								variant='outlined'
							/>
						)}
						{!user?.family_name && (
							<TextField
								id='family-name'
								autoCapitalize='words'
								autoComplete='family-name'
								label='Last name'
								fullWidth
								autoFocus
								required
								variant='outlined'
							/>
						)}
					</Box>
					<Stack sx={{ width: '100%' }}>
						<LoadingButton
							variant='contained'
							size='large'
							fullWidth
						>
							Continue
						</LoadingButton>
					</Stack>
				</>
			);
		}
	}
	return <></>;
};

export default ProgressiveCapture;
