import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';

import { EmailForm, LoginButton, PhoneForm } from 'components';
import { useWidget } from 'hooks';

import type { LoginButtonProps } from 'components/LoginButton/LoginButton';

const IdentifierFirst = () => {
	const { authOptions, flow } = useWidget();

	const { email, sms, google, apple, password } =
		authOptions?.connections || {};

	console.log(authOptions?.connections);

	const isEmail = flow?.includes('email') || false;
	const isPassword = flow?.includes('password') || false;
	const isSMS = flow?.includes('sms') || false;

	const buttons: LoginButtonProps['variant'][] = [];

	const children = [
		<Box id='button-divider'>
			<Divider
				flexItem
				style={{
					textTransform: 'uppercase',
					fontSize: '12px',
					fontWeight: 500,
				}}
			>
				or
			</Divider>
		</Box>,
	];

	if (!!email && (isSMS || isPassword)) {
		buttons.push('email');
	}

	if (!!sms && (isEmail || isPassword)) {
		buttons.push('sms');
	}

	if (!!password && !isPassword) {
		buttons.push('password');
	}

	if (!!google) {
		buttons.push('google');
	}

	if (!!apple) {
		buttons.push('apple');
	}

	if (buttons?.length > 0) {
		buttons.forEach((variant) =>
			children.push(
				<LoginButton {...{ key: `${variant}-button`, variant }} />
			)
		);
	}

	const showChildren = !flow?.includes('verify') && children?.length > 1;

	if (isSMS) {
		return <PhoneForm>{showChildren && children}</PhoneForm>;
	}

	return <EmailForm>{showChildren && children}</EmailForm>;
};

export default IdentifierFirst;
