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

export default class InnerMenu extends React.Component
{
	constructor(props)
	{
		super(props);
		this.menuRef = React.createRef();

		this.state = {
			menuOpened: false,
			count_events: 0, 
			count_fines: 0, 
		};
	}

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

	componentDidMount()
	{
		let l = 0;
		let m = 0;
		const menu = ["payments", "services", "agreement", "documents", "materials","events","change"];

		for(let i in menu)
		{
			if(this.props.router.asPath.indexOf(menu[i]) > -1)
			{
				m = i;
			}
		}

		for(let i = 0; i < m; i++)
		{
			l = l + this.menuRef.current.children[i].getBoundingClientRect().width;
		}

		this.menuRef.current.scrollLeft = l - 50;
	}

	_getActiveLink = (route) => 
	{
		if (route.indexOf("/payments/") > -1) return "График платежей";
		if (route.indexOf("/change/") > -1) return "Изменить график";
		if (route.indexOf("/services") > -1) return "Дополнительные услуги";
		if (route.indexOf("/agreement") > -1) return "Документы по договору";
		if (route.indexOf("/documents") > -1) return "Закрывающие документы";
		if (route.indexOf("/materials") > -1) return "Документы по ФСБУ 25/2018";
		if (route.indexOf("/events") > -1) return "События по договору";
		if (route.indexOf("/fines") > -1) return "Штрафы ГИБДД";

		return null;
	};

	render()
	{
		const { menuOpened, count_events, count_fines } = this.state;
		const { number, status } = this.props;

		return (
			<aside>
				<button className="nav_toggle" onClick={this._handle_onToggleMenu}>
					{ this.props.router && this._getActiveLink(this.props.router.route) }
				</button>
				<ul className={menuOpened ? "aside_nav open" : "aside_nav"} ref={ this.menuRef }>
					<li>
						<Link href={`/contract/${ number }/payments`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("payments") > -1 ? "active" : "" }>График платежей</a>
						</Link>
					</li>
					{ status !== undefined && status !== null && [46, 36, 37, 35].indexOf(status) > -1 && (
						<li>
							<Link href={`/contract/${ number }/change`} shallow>
								<a className={ this.props.router && this.props.router.asPath.indexOf("change") > -1 ? "active" : "" }>Изменить график</a>
							</Link>
						</li>
					) }
					<li>
						<Link href={`/contract/${ number }/services`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("services") > -1 ? "active" : "" }>Дополнительные услуги</a>
						</Link>
					</li>
					<li>
						<Link href={`/contract/${ number }/agreement`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("agreement") > -1 ? "active" : "" }>Документы по договору</a>
						</Link>
					</li>
					<li>
						<Link href={`/contract/${ number }/documents`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("documents") > -1 ? "active" : "" }>Закрывающие документы</a>
						</Link>
					</li>
					<li>
						<Link href={`/contract/${ number }/materials`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("materials") > -1 ? "active" : "" }>Документы по ФСБУ 25/2018</a>
						</Link>
					</li>
					<li>
						<Link href={`/contract/${ number }/events`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("events") > -1 ? "active" : "" }>События по договору { count_events > 0 && (<span>{ count_events }</span>) }</a>
						</Link>
					</li>
					<li>
						<Link href={`/contract/${ number }/fines`} shallow>
							<a className={ this.props.router && this.props.router.asPath.indexOf("fines") > -1 ? "active" : "" }>Штрафы ГИБДД{ count_fines > 0 && (<span>{ count_fines }</span>) }</a>
						</Link>
					</li>
				</ul>
			</aside>
		)
	}
}