import { Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useWidget } from 'hooks';

import GoogleIcon from './GoogleIcon';
import RootLoginButton from '../RootLoginButton';

import type { ButtonProps } from '@mui/material';

const RootGoogleLoginButton = styled(RootLoginButton)({
	backgroundColor: 'var(--google-blue)',
	color: 'white',
	'&:hover': {
		backgroundColor: 'var(--google-blue-light)',
		borderColor: 'var(--google-blue-light)',
	},
});

const GoogleLoginButton = (props: ButtonProps) => {
	const { isLoading, socialLogin } = useWidget();

	props = {
		key: props?.id,
		disabled: isLoading,
		onClick: () => socialLogin('google-oauth2'),
		startIcon: (
			<div className='google-button-icon-wrapper'>
				<div className='google-button-icon'>
					<GoogleIcon />
				</div>
			</div>
		),
		children: (
			<Typography variant='button' className='login-button-text'>
				Sign in with Google
			</Typography>
		),
		...props,
	};

	if (props?.variant === 'secondary') {
		return <RootLoginButton {...props} />;
	}

	return <RootGoogleLoginButton {...props} />;
};

GoogleLoginButton.defaultProps = {
	id: 'google-button',
	variant: 'secondary',
};

export default GoogleLoginButton;
