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

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

class DeliveryAddressForm extends React.Component<DeliveryAddressFormProps> {
	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>
							<Field name="deliveryAddress.firstName" type="text" placeholder="Jméno" 
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("deliveryAddress.firstName"); handleChange(event);
								}} className={(touched?.firstName && errors?.firstName)
									? 'input__error'
									: (values.firstName && !errors?.firstName && touched?.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="deliveryAddress.lastName" type="text" placeholder="Příjmení"
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("deliveryAddress.lastName"); handleChange(event);
								}} className={(touched?.lastName && errors?.lastName)
									? 'input__error'
									: (values.lastName && !errors?.lastName && touched?.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="deliveryAddress.city" type="text" placeholder="Město"
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("deliveryAddress.city"); handleChange(event);
						}} className={(touched?.city && errors?.city)
							? 'checkout__input__add input__error'
							: (values.city && !errors?.city && touched?.city ? 'checkout__input__add input__success' : 'checkout__input__add')}
					/>
					{errors?.city && touched?.city && <label className="error-message">{errors.city}</label>}
					<Field name="deliveryAddress.street" type="text" placeholder="Ulice"
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("deliveryAddress.street"); handleChange(event);
						}} className={(touched?.street && errors?.street)
							? 'input__error'
							: (values.street && !errors?.street && touched?.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="deliveryAddress.zipCode" type="text" placeholder="Poštovní směrovací číslo"
						onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
							setFieldTouched("deliveryAddress.zipCode"); handleChange(event);
						}} className={(touched?.zipCode && errors?.zipCode)
							? 'input__error'
							: (values.zipCode && !errors?.zipCode && touched?.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="deliveryAddress.phoneNumber" type="text" placeholder="Telefonní číslo"
								onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
									setFieldTouched("deliveryAddress.phoneNumber"); handleChange(event);
								}} className={(touched?.phoneNumber && errors?.phoneNumber)
									? 'input__error'
									: (values.phoneNumber && !errors?.phoneNumber && touched?.phoneNumber ? 'input__success' : '')}
							/>
							{errors?.phoneNumber && touched?.phoneNumber && <label className="error-message">{errors.phoneNumber}</label>}
						</div>
					</div>
				</div>
			</React.Fragment>
		);
	}
}

export default DeliveryAddressForm;