import * as React from "react";
import * as CSS from 'csstype';
import { Link, NavLink } from "react-router-dom";

interface IHumbergerProps {
	cartItemsAmount: number,
	dropdownStyle: CSS.Properties,
	closeDropDownMenu(): void,
	onDropDownMenuClick(): void,
	onLougoutClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void,
	closeHumbergerMenu(): void,
	showHumbergerMenu: boolean,
	userName: string
}

export default class Humberger extends React.Component<IHumbergerProps> {
	handleMenuOverlayClick = () => {
		this.props.closeHumbergerMenu();
	}

	render() {
		const { showHumbergerMenu } = this.props;

		return (
			<React.Fragment>
				<div id="preloder">
					<div className="loader"></div>
				</div>

				<div className={`humberger__menu__overlay ${showHumbergerMenu ? "active" : ""}`} onClick={this.props.closeHumbergerMenu}></div>
				<div className={`humberger__menu__wrapper ${showHumbergerMenu ? "show__humberger__menu__wrapper" : ""}`}>
					<div className="humberger__menu__logo">
						<img src="img/logo.jpg" alt="" />
					</div>
					<div className="humberger__menu__cart">
						<ul>
							<li>
								<Link to="/cart" onClick={this.props.closeHumbergerMenu}>
									<i className="fa fa-shopping-bag"></i>
									{this.props.cartItemsAmount > 0 ? <span>{this.props.cartItemsAmount}</span> : ''}
								</Link>
							</li>
						</ul>
						<div className="header__cart__price">
							<Link className="default__link" to="/cart" onClick={this.props.closeHumbergerMenu}>Nákupní košík</Link>
						</div>
					</div>
					<div className="humberger__menu__widget">
						<div className="header__top__right__auth">
							{this.props.userName !== ''
								? <div className="user__menu">
									<ul>
										<li onMouseLeave={this.props.closeDropDownMenu} >
											<a onClick={this.props.onDropDownMenuClick}>
												<i className="fa fa-user" style={{ marginRight: '29px' }}></i>{this.props.userName}
											</a>
											<ul style={this.props.dropdownStyle}>
												<li className="dropdown__item__li">
													<Link className="user__dropdown__item__a" to="/account/info" onClick={this.props.closeHumbergerMenu}>Nastavení</Link>
												</li>
												<li className="dropdown__item__li">
													<a onClick={(e) => { this.props.onLougoutClick(e); this.props.closeDropDownMenu(); this.props.closeHumbergerMenu() }}
														className="user__dropdown__item__a">
														Odhlásit se
													</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
								: <Link to="/login" onClick={this.props.closeHumbergerMenu}><i className="fa fa-user"></i> Přihlásit</Link>
							}
						</div>
					</div>

					<div id="mobile-menu-wrap">
						<div className="slicknav_menu">
							<nav className="slicknav_nav slicknav_hidden" style={{ display: "none"}}>
								<ul>
									<li><NavLink exact to="/" onClick={this.props.closeHumbergerMenu}>Produkty</NavLink></li>
									<li><NavLink to="/delivery" onClick={this.props.closeHumbergerMenu}>Doprava</NavLink></li>
									<li><NavLink to="/contacts" onClick={this.props.closeHumbergerMenu}>Kontakty</NavLink></li>
									<li><Link to="/aboutus" onClick={this.props.closeHumbergerMenu}>O nás</Link></li>
									<li><Link to="/tradeTerms" onClick={this.props.closeHumbergerMenu}>Obchodní podmínky</Link></li>
								</ul>
							</nav>
						</div>
					</div>

					<div className="humberger__menu__contact">
						<ul>
							<li><i className="fa fa-envelope"></i> Lhotsky15@seznam.cz</li>
							<li>Doručení zdarma pro objednávky nad <strong>1000 Kč</strong>!</li>
						</ul>
					</div>
				</div>
			</React.Fragment>
		);
	}
}