import * as React from "react";
import * as Yup from "yup";
import { Link, RouteComponentProps } from "react-router-dom";
import { Field, Formik, Form } from "formik";
import { AccountController_ResetPassword, AccountController_ValidatePasswordResetToken } from "../../../../apiClient/routes";
import http from "../../../../services/httpService";
import { toast } from "react-toastify";

export default class PasswordReset extends React.Component<RouteComponentProps<{ token: string }>> {
	componentDidMount() {
		document.title = "Obnovení hesla";

		const data = {
			token: this.props.match.params.token
		};

		http.post(AccountController_ValidatePasswordResetToken, data, { validateStatus: status => { return status <= 400 } })
			.then(response => {
				if (response.status === 400) {
					this.props.history.push("/login");
				}
			});
	}

	handleSubmit = (values: {password: string, confirmPassword: string}) => {
		const data = { ...values, token: this.props.match.params.token };

		http.post(AccountController_ResetPassword, data).then((response) => {
			toast.success('👍 Heslo úspěšně změněno!', {
				position: "top-right",
				autoClose: 3000,
				hideProgressBar: true,
				closeOnClick: true,
				pauseOnHover: false,
				draggable: true,
				progress: undefined,
			});
		}).catch(e => {
			console.log(e);
		});

		this.props.history.push("/login");
	}
	
	render() {
		const passwordResetValidationSchema = Yup.object().shape({
			password: Yup.string().required("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 passwordResetInitValues = {
			password: '',
			confirmPassword: ''
		}

		return (
			<div className="container">
				<div className="row">
					<div className="col-lg-3"></div>
					<div className="col-lg-6">
						<Formik
							initialValues={passwordResetInitValues}
							validationSchema={passwordResetValidationSchema}
							onSubmit={(values: { password: string, confirmPassword: string }) => { this.handleSubmit(values); }}
						>
							{({ errors, handleReset, handleSubmit, touched }) => (
								<Form onReset={handleReset} onSubmit={handleSubmit}>
									<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>
									<div className="d-flex justify-content-center mt-2">
										<p><Link className="login__link" to="/login">{"-> Zpět na přihlášení <-"}</Link></p>
									</div>
								</Form>
							)}
						</Formik>
					</div>
					<div className="col-lg-3"></div>
				</div>
			</div>
		);
	}
}
