import * as React from "react";
import * as CSS from 'csstype';
import Humberger from "./humberger";
import { Link, NavLink } from "react-router-dom";
import { GetObject } from "../../services/localStorageService";

type HeaderProps = {
	cartItemsAmount: number,
	onLougoutClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void,
	userName: string
};

class Header extends React.Component<HeaderProps> {
	state = {
		showHumbergerMenu: false,
		dropdownStyle: {
			position: 'absolute',
			right: '0px',
			left: '30px',
			marginLeft: '0px',
			top: '50px',
			background: '#222222',
			width: '120px',
			zIndex: 9,
			padding: '5px 0',
			textAlign: 'right',
			WebkitTransition: 'all, 0.3s',
			MozTransition: 'all, 0.3s',
			msTransition: 'all, 0.3s',
			OTransition: 'all, 0.3s',
			transition: 'all, 0.3s',
			opacity: '0',
			visibility: 'hidden'
		} as CSS.Properties
	};

	componentDidMount() {
		const user = GetObject();

		if (user !== null) {
			this.setState({ firstName: user.firstName, lastName: user.lastName });
		}
	}

	handleHumbergerMenuClose = () => {
		document.body.style.overflow = "";
		this.setState({ showHumbergerMenu: false });
	}

	handleHumbergerOpenClick = () => {
		document.body.style.overflow = "hidden";
		this.setState({ showHumbergerMenu: true });
	}

	handleDropDownClick = () => {
		let dropdownStyle = { ...this.state.dropdownStyle };
		dropdownStyle.top = "20px";
		dropdownStyle.opacity = 1;
		dropdownStyle.visibility = "visible";

		this.setState({ dropdownStyle });
	}

	handleCloseDropDown = () => {
		let dropdownStyle = { ...this.state.dropdownStyle };
		dropdownStyle.top = "50px";
		dropdownStyle.opacity = 0;
		dropdownStyle.visibility = "hidden";

		this.setState({ dropdownStyle });
	}

	render() {
		const { dropdownStyle, showHumbergerMenu } = this.state;

		return (
			<React.Fragment>

				<Humberger
					dropdownStyle={dropdownStyle}
					closeDropDownMenu={this.handleCloseDropDown}
					onDropDownMenuClick={this.handleDropDownClick}
					cartItemsAmount={this.props.cartItemsAmount}
					onLougoutClick={this.props.onLougoutClick}
					closeHumbergerMenu={this.handleHumbergerMenuClose}
					showHumbergerMenu={showHumbergerMenu}
					userName={this.props.userName}
				/>

				{/*<!-- Header Section Begin -->*/}
				<header className="header">
					<div className="header__top">
						<div className="container">
							<div className="row">
								<div className="col-lg-7 col-md-7">
									<div className="header__top__left">
										<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>
								<div className="col-lg-5 col-md-5">
									<div className="header__top__right">
										{/*<div className="header__top__right__language">*/}
										{/*	<img src="img/language.png" alt="" />*/}
										{/*	<div>English</div>*/}
										{/*</div>*/}
										<div className="header__top__right__auth">
											{this.props.userName !== ''
												? <div className="user__menu">
													<ul>
														<li  onMouseLeave={() => this.handleCloseDropDown()} >
															<a onClick={() => this.handleDropDownClick()}><i className="fa fa-user"></i> {this.props.userName}</a>
															<ul style={dropdownStyle}>
																<li className="dropdown__item__li">
																	<Link to="/account/info" className="user__dropdown__item__a">Nastavení</Link>
																</li>
																<li className="dropdown__item__li">
																	<a onClick={(e) => { this.props.onLougoutClick(e); this.handleCloseDropDown() }}
																		className="user__dropdown__item__a">
																		Odhlásit se
																	</a>
																</li>
															</ul>
														</li>
													</ul>
												</div>
												: <Link to="/login"><i className="fa fa-user"></i> Přihlásit se</Link>
											}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div className="container">
						<div className="row">
							<div className="col-lg-2">
								<div className="header__logo">
									<Link to="/"><img src="img/logo.png" alt="Logo firmy" /></Link>
								</div>
							</div>
							<div className="col-lg-8">
								<nav className="header__menu">
									<ul>
										<li><NavLink exact to="/">Produkty</NavLink></li>
										<li><NavLink to="/delivery">Doprava</NavLink></li>
										<li><NavLink to="/contacts">Kontakty</NavLink></li>
										<li><NavLink to="/aboutus">O nás</NavLink></li>
										<li><NavLink to="/tradeterms">Obchodní podmínky</NavLink></li>
									</ul>
								</nav>
							</div>
							<div className="col-lg-2">
								<div className="header__cart" title="Zobrazit nákupní košík">
									<ul>
										<li>
											<Link to="/cart">
												<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">Nákupní košík</Link></div>
								</div>
							</div>
						</div>
						<div className="humberger__open" onClick={this.handleHumbergerOpenClick}>
							<i className="fa fa-bars"></i>
						</div>
					</div>
				</header>
				{/*<!-- Header Section End -->*/}
			</React.Fragment>
		)
	}
}

export default Header;