import * as React from "react";
import { Link, Redirect, RouteComponentProps } from "react-router-dom";
import { StaticContext } from 'react-router';

type LocationState = {
	orderNumber: number,
	totalPrice: number
};

type OrderCompletedProps = RouteComponentProps<{}, StaticContext, LocationState> & { clearShoppingCart(): void };

export default function OrderCompleted(props: OrderCompletedProps) {
	const [mounted, setMounted] = React.useState(false);

	React.useEffect(() => {
		document.title = "Shrnutí";

		if (props.location.state !== undefined && !mounted) {
			props.clearShoppingCart();
		}

		setMounted(true);
	});

	if (props.location.state !== undefined) {
		return (
			<React.Fragment>
				<section className="product-details">
					<div className="container">
						<div className="row">
							<div className="col">
								<h4 style={{ paddingBottom: 25 }}>Objednávka s číslem {props.location.state.orderNumber} a celkovou cenou {props.location.state.totalPrice} Kč úspěšně vytvořena</h4>
								<p>
									Vaše objednávka byla přijata ke zpracování. O průběhu zpracování objednávky Vás budeme informovat na Vámi zadanou emailovou adresu.
									<br />
									Děkujeme, že u nás nakupujete!
								</p>
							</div>
						</div>
						<div className="row" style={{ paddingBottom: 50 }}>
							<div className="col">
								<Link className="primary-btn" to="/">Zpět na hlavní stránku</Link>
							</div>
						</div>
					</div>
				</section>
			</React.Fragment>
		);
	} else {
		return <Redirect to="/" />
	}
}