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

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

	componentDidMount()
	{
		const hash = this.props.router.asPath.split('#')[1];
		this.setState({ type: hash });
	}

	componentDidUpdate(prevProps, prevState)
	{
		const hash = this.props.router.asPath.split('#')[1];
		if(this.state.type !== hash)
		{
			this.setState({ type: hash });
		}
	}

	render()
	{
		console.log("Events", "InnerMenu", "this.props.router", this.props.router);
		const { type } = this.state;

		return (
			<aside>
				<ul className="aside_nav">
					<li>
						<Link href={`/events`} shallow>
							<a className={ type === undefined ? "active" : "" }>Все события</a>
						</Link>
					</li> 
					<li>
						<Link href={`/events#restrictions`} shallow>
							<a className={ type === "restrictions" ? "active" : "" }>Ограничения</a>
						</Link>
					</li>
					<li>
						<Link href={`/events#payments`} shallow>
							<a className={ type === "payments" ? "active" : "" }>Платежи</a>
						</Link>
					</li>
					<li>
						<Link href={`/events#additional`} shallow>
							<a className={ type === "additional" ? "active" : "" }>Дополнительные услуги</a>
						</Link>
					</li>
					<li>
						<Link href={`/events#fines`} shallow>
							<a className={ type === "fines" ? "active" : "" }>Штрафы</a>
						</Link>
					</li>
					<li>
						<Link href={`/events#finance`} shallow>
							<a className={ type === "finance" ? "active" : "" }>Банки</a>
						</Link>
					</li>
					<li>
						<Link href={`/events#pts`} shallow>
							<a className={ type === "pts" ? "active" : "" }>ПТС</a>
						</Link>
					</li>
				</ul>
			</aside>
		)
	}
}