import EmailIcon from '@mui/icons-material/MailOutline';
import PasswordIcon from '@mui/icons-material/Password';
import SmsIcon from '@mui/icons-material/Sms';
import Typography from '@mui/material/Typography';
import { startCase } from 'lodash';

import AppleLoginButton from './AppleLoginButton';
import GoogleLoginButton from './GoogleLoginButton';
// import PasswordLoginButton from './PasswordButton';
import RootLoginButton from './RootLoginButton';
import { useWidget } from 'hooks';

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

const LoginButton = ({ variant = 'email', ...props }: LoginButtonProps) => {
	const { goTo } = useWidget();

	const rootProps: RootLoginButtonProps = props;

	switch (variant) {
		case 'google':
			return <GoogleLoginButton {...props} />;
		case 'apple':
			return <AppleLoginButton {...props} />;
		// case 'password':
		// 	return <PasswordLoginButton {...props} />;
		case 'password':
			rootProps.icon = <PasswordIcon />;
			break;
		case 'sms':
			rootProps.icon = <SmsIcon />;
			break;
		default:
			rootProps.icon = <EmailIcon />;
	}

	return (
		<RootLoginButton
			{...{
				id: `${variant}-button`,
				onClick: () => goTo(variant),
				...rootProps,
			}}
		>
			<Typography
				variant='button'
				className='login-button-text'
			>{`Sign in with ${startCase(variant)}`}</Typography>
		</RootLoginButton>
	);
};

LoginButton.defaultProps = {
	variant: 'email',
};

export default LoginButton;

export interface LoginButtonProps
	extends Omit<ButtonProps, 'icon' | 'variant'> {
	icon?: boolean;
	variant?: 'google' | 'apple' | 'email' | 'sms' | 'password';
}
