import * as React from "react";
import * as Yup from "yup";
import { Field, Form, Formik } from "formik";
import { Modal } from "react-bootstrap";
import { AddressType, IAddress } from "../../../../apiModels/ViewModels";

type AddressFormModalProps = {
	onCreateAddressModalClose(): void,
	onCreateAddressModalSubmit(newAddress: IAddress): void,
    show: boolean
}

export default function AddressFormModal({ onCreateAddressModalClose, onCreateAddressModalSubmit, show }: AddressFormModalProps) {
	const addressValidationSchema = Yup.object().shape({
		firstName: Yup.string().required("Jméno je vyžadováno!"),
		lastName: Yup.string().required("Příjmení je vyžadováno!"),
		phoneNumber: Yup.string().required("Telefonní číslo je vyžadováno!"),
		city: Yup.string().required("Město je vyžadováno!"),
		street: Yup.string().required("Ulice je vyžadována!"),
		zipCode: Yup.string().required("PSČ je vyžadováno!"),
		addressTypeID: Yup.string().required("Zvolte typ adresy!")
	});

	const initAddress: IAddress = {
		id: 0,
		firstName: '',
		lastName: '',
		phoneNumber: '',
		city: '',
		street: '',
		zipCode: '',
		email: '',
		addressTypeID: ''
	}

    return (
        <React.Fragment>
            <Modal
                show={show}
                onHide={onCreateAddressModalClose}
                backdrop="static"
                keyboard={false}
            >
                <Modal.Header closeButton>
                    <Modal.Title>Nová adresa</Modal.Title>
                </Modal.Header>
					<Formik
						initialValues={initAddress}
						validationSchema={addressValidationSchema}
						enableReinitialize={true}
						onSubmit={(values: IAddress) => { onCreateAddressModalSubmit(values); }}
					>
						{({ errors, handleSubmit, touched }) => (
						<Form onSubmit={handleSubmit}>
							<Modal.Body>
								<div className="row" style={{ marginBottom: '24px' }}>
									<div className="col-lg col-md">
										<p>Typ adresy<span>*</span></p>
										<div className="form-check">
											<Field type="radio" value={AddressType.DeliveryAddress.toString()} name="addressTypeID" className="form-check-input" />
											Doručovací
										</div>
										<div className="form-check">
											<Field type="radio" value={AddressType.InvoicingAddress.toString()} name="addressTypeID" className="form-check-input" />
											Fakturační
										</div>
										{errors.addressTypeID && touched.addressTypeID && <label className="error-message">{errors.addressTypeID}</label>}
									</div>
								</div>
								<div className="row">
									<div className="col-lg-6">
										<div className="checkout__input">
											<p>Jméno<span>*</span></p>
											<Field name="firstName" type="text" placeholder="Jméno"
												className={(touched.firstName && errors.firstName)
													? 'input__error'
													: (touched.firstName && !errors.firstName ? 'input__success' : '')}
											/>
											{errors && 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="lastName" type="text" placeholder="Příjmení"
												className={(touched.lastName && errors.lastName)
													? 'input__error'
													: (touched.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="city" type="text" placeholder="Město"
										className={(touched.city && errors.city)
											? 'checkout__input__add input__error'
											: (touched.city && !errors.city ? 'checkout__input__add input__success' : 'checkout__input__add')}
									/>
									{errors.city && touched.city && <label className="error-message">{errors.city}</label>}
									<Field name="street" type="text" placeholder="Ulice"
										className={(touched.street && errors.street)
											? 'input__error'
											: (touched.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="zipCode" type="text" placeholder="Poštovní směrovací číslo"
										className={(touched.zipCode && errors.zipCode)
											? 'input__error'
											: (touched.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="phoneNumber" type="text" placeholder="Telefonní číslo"
												className={(touched.phoneNumber && errors.phoneNumber)
													? 'input__error'
													: (touched.phoneNumber && !errors.phoneNumber ? 'input__success' : '')}
											/>
											{errors.phoneNumber && touched.phoneNumber && <label className="error-message">{errors.phoneNumber}</label>}
										</div>
									</div>
								</div>
							</Modal.Body>
							<Modal.Footer>
								<button type="submit" className="primary-btn">Potvrdit</button>
								<button type="button" onClick={onCreateAddressModalClose} className="danger-btn">Zrušit</button>
							</Modal.Footer>
						</Form>
						)}
					</Formik>
            </Modal>
        </React.Fragment>
    );
}