import * as React from "react";
import { Field, FormikErrors, FormikTouched } from "formik";
import { IPassword } from "../../../../apiModels/ViewModels";

type CreateAccountFormProps = {
	errors?: FormikErrors<IPassword>,
	handleChange<T = string | React.ChangeEvent<any>>(field: T): T extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void,
	setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void,
	touched?: FormikTouched<IPassword>,
	values: IPassword
}

class CreateAccountForm extends React.Component<CreateAccountFormProps> {
	render() {
		const { errors, handleChange, setFieldTouched, touched, values } = this.props;

		return (
			<React.Fragment>
				<p>Vytvořte si účet zadáním nového hesla. Pokud jste se již registrovali, přihlašte se pomocí tlačítka 'Přihlásit se' v pravém horním rohu.</p>
				<div className="checkout__input">
					<p>Heslo<span>*</span></p>
					<Field name="password.password" type="password" placeholder="Heslo"
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => { handleChange(event); }}
						className={(touched?.password && errors?.password)
							? 'input__error'
							: (touched?.password && !errors?.password && values?.password ? 'input__success' : '')}
					/>
					{errors?.password && touched?.password && <label className="error-message">{errors.password}</label>}
				</div>
				<div className="checkout__input">
					<p>Ověření hesla<span>*</span></p>
					<Field name="password.confirmPassword" type="password" placeholder="Potvrzení hesla"
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => { handleChange(event); }}
						className={(touched?.confirmPassword && errors?.confirmPassword)
							? 'input__error'
							: (touched?.confirmPassword && !errors?.confirmPassword && values?.confirmPassword ? 'input__success' : '')}
					/>
					{errors?.confirmPassword && touched?.confirmPassword && <label className="error-message">{errors.confirmPassword}</label>}
				</div>
				
			</React.Fragment>
		);
	}
}

export default CreateAccountForm;