import { Typography } from '@mui/material';
import PasswordIcon from '@mui/icons-material/Password';

import { LoadingButton } from 'components';
import { useWidget } from 'hooks';
import RootLoginButton from './RootLoginButton';

import type { LoadingButtonProps } from '@mui/lab/LoadingButton';

const PasswordLoginButton = ({ icon, ...props }: PasswordLoginButtonProps) => {
	const { isLoadingAuth, loginWithRedirect } = useWidget();

	const handleSubmitPassword: React.MouseEventHandler<
		HTMLButtonElement
	> = () => loginWithRedirect();

	props.key = props?.id;

	if (icon) {
		return (
			<RootLoginButton
				{...{
					variant: 'secondary',
					onClick: handleSubmitPassword,
					startIcon: (
						<div className='button-icon no-chiclet'>
							<PasswordIcon />
						</div>
					),
					...props,
				}}
			>
				<Typography variant='button' className='login-button-text'>
					Sign in with Password
				</Typography>
			</RootLoginButton>
		);
	}

	return (
		<LoadingButton
			{...{
				disabled: isLoadingAuth,
				loading: isLoadingAuth,
				onClick: handleSubmitPassword,
				variant: 'secondary',
				...props,
			}}
		>
			Continue with Password
		</LoadingButton>
	);
};

PasswordLoginButton.defaultProps = {
	id: 'password-button',
};

export default PasswordLoginButton;

interface PasswordLoginButtonProps extends LoadingButtonProps {
	icon?: boolean;
}
