import Button from '@mui/material/Button';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import EmailIcon from '@mui/icons-material/Email';

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

const EmailInput = ({
	hideIcon,
	inputIcon,
	ButtonProps,
	InputProps,
	...props
}: EmailInputProps) => {
	const { onClick } = ButtonProps || {};

	const startIcon = inputIcon ? (
		inputIcon
	) : (
		<InputAdornment position='start'>
			<EmailIcon />
		</InputAdornment>
	);

	const editButton =
		onClick && typeof onClick === 'function' ? (
			<InputAdornment position='end'>
				<Button
					variant='text'
					size='small'
					sx={{ textTransform: 'uppercase', width: '5px !important' }}
					{...{ onClick }}
				>
					Edit
				</Button>
			</InputAdornment>
		) : undefined;

	return (
		<TextField
			{...{
				InputProps: {
					endAdornment: editButton,
					startAdornment: !hideIcon ? startIcon : undefined,
					...InputProps,
				},
				...props,
			}}
		/>
	);
};

EmailInput.defaultProps = {
	autoCapitalize: 'none',
	autoComplete: 'email',
	autoFocus: true,
	fullWidth: true,
	id: 'email-input',
	hideIcon: false,
	label: '',
	margin: 'normal',
	placeholder: 'Enter your email',
	required: true,
	type: 'email',
	value: '',
	variant: 'outlined',
};

export default EmailInput;

export interface EmailInputProps extends StandardTextFieldProps {
	ButtonProps?: ButtonProps;
	hideIcon?: boolean;
	inputIcon?: React.ReactNode;
}
