/* eslint-disable react/destructuring-assignment */
// eslint-disable-next-line object-curly-newline
import type { FormEvent } from 'react';
import type React from 'react';
import { useContext } from 'react';

import FooterLogo from '../../Components/Layout/FooterLogo';
import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
import styles from '../SignUp/SignUp.module.scss';
import type { SignInInterface } from './ValidationHelper';

const SignInForm: React.FC<SignInInterface> = (props: SignInInterface): JSX.Element => {
	const globalState: GlobalStateModel = useContext(GlobalStateContext);

	function submitHandler(event: FormEvent): void {
		event.preventDefault();
		globalState.signInHandler();
	}
	return (
		<form className={styles.formContainer} onSubmit={submitHandler}>
			{props.linkCognito && (
				<div className={styles.cognitoLink}>
					<a href={props.linkSignUpCognito ? props.linkSignUpCognito : ''}>
						{props.submitButtonValue}
					</a>
				</div>
			)}
			<small className={styles.linkToSignIn}>
				Already have an account?
				<a href={props.linkCognito ? props.linkCognito : ''} className={styles.signupLink}>
					{props.linkCognitoPageName}
				</a>
			</small>
			<div className={styles.footer}>
				<div>
					<a href="https://www.moneyxplier.com/privacy-policy" target="_blank" rel="noreferrer">
						Privacy Policy
					</a>{' '}
					-{' '}
					<a href="https://www.moneyxplier.com/terms-of-use" target="_blank" rel="noreferrer">
						Terms of service
					</a>
				</div>
				<div>
					<FooterLogo logoClass={styles.logo} />
				</div>
			</div>
		</form>
	);
};

export default SignInForm;