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

const menu = [
	{id: 1, name: "Календарь оплат", link: "/documents/calendar"},
	{id: 2, name: "Акты сверок", link: "/documents/reconciliations"},
	{id: 3, name: "Закрывающие документы", link: "/documents/finals"},
]

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

		menu.forEach(item => 
		{
			this[item.id] = React.createRef();
		});
	}

	componentDidMount()
	{
		let l = 0;
		let m = 0;

		for(let i in menu)
		{
			if(this.props.router.asPath.indexOf(menu[i].link) > -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;
	}

	scrollToCategory = id => {
		
	};

	render()
	{
		return (
			<aside>
				<ul className="aside_nav" ref={ this.menuRef }>
					{ menu.map(item => (
						<li key = {item.id} ref={this[item.id]} onClick={() => this.scrollToCategory(item.id)}>
							<Link 
								href={item.link}
								shallow
							>
								<a className={ this.props.router && this.props.router.route === item.link ? "active" : "" }>{item.name}</a>
							</Link>
						</li>
					)) }
				</ul>
			</aside>
		)
	}
}