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

type DeliveryAndPaymentTypeFormProps = {
	deliveryTypes: IDeliveryType[],
	paymentTypes: IPaymentType[],
	onDeliveryTypeChange(item: IDeliveryType): void,
	onPaymentTypeChange(item: IDeliveryType): void,
	errors?: FormikErrors<{ deliveryTypePicked: string, paymentTypePicked: string }>,
	handleChange<T = string | React.ChangeEvent<any>>(field: T): T extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void,
	selectedDeliveryType: IDeliveryType,
	setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void,
	setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
	showSelectPaymentType: boolean,
	touched?: FormikTouched<{ deliveryTypePicked: string, paymentTypePicked: string}>
}

class DeliveryAndPaymentTypeForm extends React.Component<DeliveryAndPaymentTypeFormProps> {
	render() {
		const { errors, handleChange, onDeliveryTypeChange, onPaymentTypeChange, setFieldTouched, setFieldValue, showSelectPaymentType, touched } = this.props;
		return (
			<React.Fragment>
				<div className="row" style={{ marginBottom: "24px" }}>
					<div className="col-lg-6 col-md-6">
						<h4>Způsob dopravy</h4>
						{this.props.deliveryTypes.map((item: IDeliveryType) => {
							return (
								<div className="form-check" key={item.id}>
									<label className="form-check-label">
										<Field type="radio" value={item.id.toString()} name="deliveryTypePicked"
											onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
												setFieldTouched("deliveryTypePicked");
												setFieldValue("paymentTypePicked", '2', false);
												handleChange(event);
												onDeliveryTypeChange(item);
											}}
											className="form-check-input" />{`${item.name} (${item.fee} Kč)`}
									</label>
								</div>
							);
						})}
						{errors?.deliveryTypePicked && touched?.deliveryTypePicked && <label className="error-message">{errors.deliveryTypePicked}</label>}
					</div>
					<div className="col-lg-6 col-md-6">
						{showSelectPaymentType == true
							? <React.Fragment>
								<h4>Způsob platby</h4>
								{this.props.paymentTypes.map((item: IPaymentType) => {
									return (
										<div className="form-check" key={item.id}>
											<label className="form-check-label">
												<Field type="radio" value={item.id.toString()} name="paymentTypePicked"
													onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
														setFieldTouched("paymentTypePicked");
														handleChange(event);
														onPaymentTypeChange(item);
													}}
													className="form-check-input" />{`${item.name} (${item.fee} Kč)`}
											</label>
										</div>
									);
								})}
								{errors?.paymentTypePicked && touched?.paymentTypePicked && <label className="error-message">{errors.paymentTypePicked}</label>}
							</React.Fragment>
							: null}
					</div>
				</div>
			</React.Fragment>
		);
	}
}

export default DeliveryAndPaymentTypeForm;