import React from "react";
import Link from "next/link";

export default class Header extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			menuOpened: false, 
		}
	}

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

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

		return null;
	}

	render()
	{
		const { menuOpened } = this.state;
		return (
			<header>
				<div className="container">
					<a href="/" className="logo">
						<img src="/assets/images/logo.svg" alt="" width="217px" height="32px" />
					</a>
					<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/" shallow>
										<a className={ this.props.router && this.props.router.route === "/settings" ? "active" : "" }>Настройки</a>
									</Link>
								</li>
								<li>
									<Link href={ process.env.NEXT_PUBLIC_MAIN_SITE }>
										<a>Основной сайт</a>
									</Link>
								</li>
							</ul>
						</nav>
						<a href="tel:88003337575">8 800 333 75 75</a>
					</div>
				</div>
			</header>
		)
	}
}