import React from "react";
import Link from "next/link";
import { connect } from "react-redux";

import { logout, getEvents, getAppeals } from "../../../actions";
import NotificationsList from "./NotificationsList";

class Header extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			observer: false, 
			menuOpened: false, 
			notificationsOpened: false, 
			messagesOpened: false, 
			events: [], 
			events_loaded: false, 
			appeals: 0, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			observer: nextProps.observer, 
			events: nextProps.events, 
			events_loaded: nextProps.events_loaded, 
			appeals: nextProps.appeals, 
		};
	}

	componentDidMount()
	{
		const { dispatch } = this.props;

		//console.log("Header", "CDM");

		getEvents({ dispatch });
		//console.log("Header", "CDM", "222222");

		getAppeals({ dispatch });
	}

	componentDidUpdate(prevProps, prevState)
	{
		if(!prevState.events_loaded)
		{
			//this.setState({ events_loaded: true });
		}
	}

	_getActiveLink = (route) => 
	{
		if (route === "/") return "Договоры";
		if (route.indexOf("/documents/") > -1) return "Взаиморасчеты и закрывающие документы";
		if (route.indexOf("/settings/") > -1) return "Настройки";
		if (route.indexOf("/contract") === 0) return "Договоры";
		if (route.indexOf("/support") === 0) return "Обращения";
		if (route.indexOf("/events") === 0) return "События";
		if (route.indexOf("/questionnaire") === 0) return "Анкета лизингополучателя";

		return null;
	};

	_handle_onToggleMenu = () => 
	{
		this.setState({
			menuOpened: !this.state.menuOpened,
		});
	};

	_handle_onLogout = () => 
	{
		this.props.router.push("/logout");
	};

	_handle_onToggleNotifications = () => 
	{
		const { notificationsOpened } = this.state;
		this.setState({ notificationsOpened: notificationsOpened ? false : true });
	}

	_handle_onToggleMessages = () => 
	{
		const { messagesOpened } = this.state;
		this.setState({ messagesOpened: messagesOpened ? false : true });
	}

	_renderEvent = (event, index) => 
	{
		switch(event.event_type)
		{
			case "kasko_prolong":
			{
				return (
					<li className="new" key={ index }>
						<p className="name"><b>Тут бы какое-то сообщение передавать а не просто параметры, непонятно СКОЛЬКО дней осталось ДО окончания КАСКО. Или параметр kasko_end. Договор: { event.contract_number }, полис: { event.add_info }</b></p>
						<p className="date">{ event.event_date }</p>
						<p className="action">
							<Link href={`/${ event.contract_number }`}>
								<a>Подробнее</a>
							</Link>
						</p>
					</li>
				)
			}
		}

		return null;
		{/*}
		<li className="new" key={ index }>
			<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
			<p className="date">10.01.2022</p>
			<p className="action">
				<Link href="/">
					<a>Посмотрите порядок возврата СТС</a>
				</Link>
				&nbsp; или &nbsp;
				<Link href="/">
					<a>Загрузите скан СТС</a>
				</Link>
			</p>
		</li>
		<li className="new">
			<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
			<p className="date">10.01.2022</p>
			<p className="action">
				<Link href="/">
					<a>Посмотрите порядок возврата СТС</a>
				</Link>
				&nbsp; или &nbsp;
				<Link href="/">
					<a>Загрузите скан СТС</a>
				</Link>
			</p>
		</li>
		<li className="new">
			<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
			<p className="date">10.01.2022</p>
			<p className="action">
				<Link href="/">
					<a>Подробнее</a>
				</Link>
			</p>
		</li>
		{*/}
	}

	render() 
	{
		const { observer, menuOpened, notificationsOpened, messagesOpened, events, events_loaded, appeals } = this.state;
		//console.log("Header", "events", events);


		return (
			<header>
				{ observer && (
					<div style={{ position: "fixed", backgroundColor: "#1C01A9", display: "flex", width: "100%", zIndex: 1, fontSize: "11px", lineHeight: "16px", alignItems: "center", justifyContent: "center", color: "#fff" }}>Сервисный режим</div>
				) }
				<div className="container">
					<Link href={`/`} shallow>
						<a className="logo">
							<img
								src="/assets/images/logo.svg"
								alt=""
								width="217px"
								height="32px"
							/>
						</a>
					</Link>
					<div className="header_menu">
						<nav>
							<button
								className="nav_toggle"
								onClick={this._handle_onToggleMenu}
							>
								{this.props.router && this._getActiveLink(this.props.router.route)}
							</button>
							<ul id="menu_list" className={menuOpened ? "open" : ""}>
								<li>
									<Link href={`/`} shallow>
										<a className={ this.props.router && (this.props.router.route === "/" || this.props.router.route.indexOf("/contract") === 0) ? "active" : "" }>
											Договоры
										</a>
									</Link>
								</li>
								<li>
									<Link href={`/documents/calendar/`} shallow>
										<a className={ this.props.router && this.props.router.route.indexOf("/documents") === 0 ? "active" : "" }>
											Взаиморасчеты и закрывающие документы
										</a>
									</Link>
								</li>
								<li>
									<Link href="/settings/phone/" shallow>
										<a className={ this.props.router && this.props.router.route.indexOf("/settings") === 0 ? "active" : "" }>
											Настройки
										</a>
									</Link>
								</li>
								<li>
									<Link href="/support/faq/" shallow>
										<a className={ this.props.router && this.props.router.route.indexOf("/support") === 0 ? "active" : "" }>Обращения</a>
									</Link>
								</li>
								{/* 
									<li>
										<Link href={ process.env.NEXT_PUBLIC_MAIN_SITE }>
											<a>Основной сайт</a>
										</Link>
									</li>
								*/}
							</ul>
						</nav>
					</div>
					<ul className="system_nav">
						<li>
							<Link href="tel:88003337575"><a data-icon="phone" className="button">Телефон</a></Link>
						</li>
						<li>
							<a data-icon="notify" data-notify={ events !== undefined && events !== null ? events.length : 0 } className="button" onClick={ this._handle_onToggleNotifications }>
								Уведомления
							</a>
							<div className={`backdrop ${ notificationsOpened && "opened" }`}>
								<div className="modal">
									{ events_loaded && (
										<>
											{ events.length > 0 ? (
												<NotificationsList events={ events } { ...this.props }/>
											) : (
												<p style={{ paddingBottom: "30px" }}>Нет действующих событий для показа</p>
											) }
										</>
									)}
									<button className="close" onClick={ this._handle_onToggleNotifications }>Закрыть</button>
								</div>
							</div>
						</li>
						<li>
							<Link href={ `/support/appeals` } shallow>
								<a data-icon="message" data-notify={ appeals } className="button" onClick={ this._handle_onToggleMessages }>
									Сообщения
								</a>
							</Link>
						</li>
						<li>
							<button
								className="lk"
								title="Выход"
								onClick={() => this._handle_onLogout()}
							></button>
						</li>
					</ul>
				</div>
			</header>
		);
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		observer: state.auth.observer, 
		events: state.events.list, 
		events_loaded: state.events.loaded, 
		appeals: state.support.appeals.new, 
	}
}

export default connect(mapStateToProps)(Header);