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

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

	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;
	}

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

		return (
			<aside>
				<ul className="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> 
					<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" : "" }>События по договору <span>3</span></a>
						</Link>
					</li>
				</ul>
			</aside>
		)
	}
}