import * as React from "react";
import * as Yup from "yup";
import { RouteComponentProps } from "react-router-dom";
import { Field, Formik, Form } from "formik";
import http from "../../../../services/httpService";
import { toast } from "react-toastify";
import { AccountController_ChangePassword } from "../../../../apiClient/routes";
import { IPasswordChange } from "../../../../apiModels/ViewModels";
import { IsCustomerLoggedIn } from "../../../../services/localStorageService";

type ChangePasswordFormProps = RouteComponentProps<{ id: string }>;

class ChangePasswordForm extends React.Component<ChangePasswordFormProps> {
	componentDidMount() {
		document.title = "Změna hesla";

		if (!IsCustomerLoggedIn) {
			this.props.history.push("/");
		}
	}

	handleSubmit = (data: IPasswordChange): void => {
		http.post(AccountController_ChangePassword, data, { validateStatus: (status: number) => { return status <= 400 } }).then((response) => {
			if (response.status === 200) {
				toast.success('👍 Heslo úspěšně změněno!', {
					position: "top-right",
					autoClose: 3000,
					hideProgressBar: true,
					closeOnClick: true,
					pauseOnHover: false,
					draggable: true,
					progress: undefined,
				});
			} else if (response.status === 400) {
				toast.error('Něco se nepovedlo!', {
					position: "top-right",
					autoClose: 3000,
					hideProgressBar: true,
					closeOnClick: true,
					pauseOnHover: false,
					draggable: true,
					progress: undefined,
				});
			}
		}).catch(e => {
			console.log(e);
		});
	}

	render() {
		const passwordChangeValidationSchema = Yup.object().shape({
			oldPassword: Yup.string().required("Aktuální heslo je vyžadováno!"),
			password: Yup.string().required("Nové heslo je vyžadováno!").min(8, "Minimální délka hesla je 8 znaků!"),
			confirmPassword: Yup.string().required("Potvrzení hesla je vyžadováno!").oneOf([Yup.ref('password'), null], "Hesla musí být stejná!")
		});

		const passwordChangeInitValues = {
			oldPassword: '',
			password: '',
			confirmPassword: ''
		}

		return (
			<React.Fragment>
				<div className="row">
					<div className="col-lg-3"></div>
					<div className="col-lg-6">
						<Formik
							initialValues={passwordChangeInitValues}
							validationSchema={passwordChangeValidationSchema}
							onSubmit={(values: IPasswordChange, { resetForm }) => { this.handleSubmit(values); resetForm({ values: passwordChangeInitValues }) }}
						>
							{({ errors, handleReset, handleSubmit, touched }) => (
								<Form onReset={handleReset} onSubmit={handleSubmit}>
									<div className="checkout__input">
										<p>Aktuální heslo<span>*</span></p>
										<Field name="oldPassword" type="password" placeholder="Aktuální heslo"
											className={(touched.oldPassword && errors.oldPassword)
												? 'input__error'
												: (touched.oldPassword && !errors.oldPassword ? 'input__success' : '')}
										/>
										{errors && touched.oldPassword && errors.oldPassword && <><label className="error-message">{errors.oldPassword}</label></>}
									</div>
									<div className="checkout__input">
										<p>Heslo<span>*</span></p>
										<Field name="password" type="password" placeholder="Heslo"
											className={(touched.password && errors.password)
												? 'input__error'
												: (touched.password && !errors.password ? 'input__success' : '')}
										/>
										{errors && touched.password && errors.password && <><label className="error-message">{errors.password}</label></>}
									</div>
									<div className="checkout__input">
										<p>Potvrzení hesla<span>*</span></p>
										<Field name="confirmPassword" type="password" placeholder="Potvrzení hesla"
											className={(touched.confirmPassword && errors.confirmPassword)
												? 'input__error'
												: (touched.confirmPassword && !errors.confirmPassword ? 'input__success' : '')}
										/>
										{errors && touched.confirmPassword && errors.confirmPassword && <><label className="error-message">{errors.confirmPassword}</label></>}
									</div>
									<button type="submit" className="site-btn">Změnit heslo</button>
								</Form>
							)}
						</Formik>
					</div>
					<div className="col-lg-3"></div>
				</div>
			</React.Fragment>
		);
	}
}

export default ChangePasswordForm;