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

type InvoicingAddressFormProps = {
	errors?: FormikErrors<IInvoicingAddress>,
	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<IInvoicingAddress>,
	values: IInvoicingAddress
}

class InvoicingAddressForm extends React.Component<InvoicingAddressFormProps> {
	render() {
		const { errors, handleChange, setFieldTouched, touched, values } = this.props;
		return (
			<React.Fragment>
				<div className="row">
					<div className="col-lg-6">
						<div className="checkout__input">
							<p>Jméno<span>*</span></p>
							{/* setFieldTouched zrejme neni potreba volat */}
							<Field name="invoicingAddress.firstName" placeholder="Jméno" value={values.firstName || ''}
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("invoicingAddress.firstName"); handleChange(event);
								}} className={(touched?.firstName && errors?.firstName)
									? 'input__error'
									: (values.firstName && !errors?.firstName ? 'input__success' : '')}
							/>
							{errors?.firstName && touched?.firstName && <label className="error-message">{errors.firstName}</label>}
						</div>
					</div>
					<div className="col-lg-6">
						<div className="checkout__input">
							<p>Příjmení<span>*</span></p>
							<Field name="invoicingAddress.lastName" placeholder="Příjmení" value={values.lastName || ''}
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("invoicingAddress.lastName"); handleChange(event);
								}} className={(touched?.lastName && errors?.lastName)
									? 'input__error'
									: (values.lastName && !errors?.lastName ? 'input__success' : '')}
							/>
							{ errors?.lastName && touched?.lastName && <label className="error-message">{errors.lastName}</label>}
						</div>
					</div>
				</div>
				<div className="checkout__input">
					<p>Město a ulice<span>*</span></p>
					<Field name="invoicingAddress.city" placeholder="Město" value={values.city || ''}
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("invoicingAddress.city"); handleChange(event);
						}} className={(touched?.city && errors?.city)
							? 'checkout__input__add input__error'
							: (values.city && !errors?.city ? 'checkout__input__add input__success' : 'checkout__input__add')}
					/>
					{errors?.city && touched?.city && <label className="error-message">{errors.city}</label>}
					<Field name="invoicingAddress.street" placeholder="Ulice" value={values.street || ''}
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("invoicingAddress.street"); handleChange(event);
						}} className={(touched?.street && errors?.street)
							? 'input__error'
							: (values.street && !errors?.street ? 'input__success' : '')}
					/>
					{errors?.street && touched?.street && <label className="error-message">{errors.street}</label>}
				</div>
				<div className="checkout__input">
					<p>PSČ<span>*</span></p>
					<Field name="invoicingAddress.zipCode" placeholder="Poštovní směrovací číslo" value={values.zipCode || ''}
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("invoicingAddress.zipCode"); handleChange(event);
						}} className={(touched?.zipCode && errors?.zipCode)
							? 'input__error'
							: (values.zipCode && !errors?.zipCode ? 'input__success' : '')}
					/>
					{errors?.zipCode && touched?.zipCode && <label className="error-message">{errors.zipCode}</label>}
				</div>
				<div className="row">
					<div className="col-lg-6">
						<div className="checkout__input">
							<p>Telefonní číslo<span>*</span></p>
							<Field name="invoicingAddress.phoneNumber" placeholder="Telefonní číslo" value={values.phoneNumber || ''}
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("invoicingAddress.phoneNumber"); handleChange(event);
								}} className={(touched?.phoneNumber && errors?.phoneNumber)
									? 'input__error'
									: (values.phoneNumber && !errors?.phoneNumber ? 'input__success' : '')}
							/>
							{errors?.phoneNumber && touched?.phoneNumber && <label className="error-message">{errors.phoneNumber}</label>}
						</div>
					</div>
					<div className="col-lg-6">
						<div className="checkout__input">
							<p>Email<span>*</span></p>
							<Field name="invoicingAddress.email" type="email" placeholder="Email" value={values.email || ''}
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("invoicingAddress.email"); handleChange(event);
								}} className={(touched?.email && errors?.email)
									? 'input__error'
									: (values.email && !errors?.email ? 'input__success' : '')}
							/>
							{errors?.email && touched?.email && <label className="error-message">{errors.email}</label>}
						</div>
					</div>
				</div>
			</React.Fragment>
		);
	}
}

export default InvoicingAddressForm;