import React from "react";
import Link from "next/link";
import { connect } from "react-redux";
import { getContractEvents, getContractFines, getContractInfo, } from "../../../actions";
import NoSSR from '@mpth/react-no-ssr';

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

		this.state = {
			menuOpened: false, 
			step: 1, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			step: nextProps.questionnaire.step, 
		};
	}

	componentDidMount()
	{
	}

	componentDidUpdate(prevProps, prevState)
	{
	}

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

	_getActiveLink = (route) => 
	{
		if (route.indexOf("#main") > -1) return "1. Информация о лизингополучателе";
		if (route.indexOf("#contacts") > -1) return "2. Адреса лизингополучателя";
		if (route.indexOf("#signer") > -1) return "3. Информация о единоличном исполнительном органе, подписанте договора лизинга";
		if (route.indexOf("#shareholders") > -1) return "4. Сведения об участниках (акционерах) и бенефициарных владельцах";
		if (route.indexOf("#regulatory") > -1) return "5. Сведения об органах управления";
		if (route.indexOf("#non-profit") > -1) return "6. Данные о некомерческой организации";
		if (route.indexOf("#check") > -1) return "7. Проверка введеных данных";
		if (route.indexOf("#signing") > -1) return "8. Выбор метода подписания";

		return null;
	}

	render()
	{
		console.log("questionnaire", this.props.questionnaire);
		const { menuOpened, step, } = this.state;
		const { questionnaire } = this.props;

		console.log("this.props.router.asPath", this.props.router.asPath);

		return (
			<aside>
				<NoSSR>
					<button className="nav_toggle" onClick={ this._handle_onToggleMenu }>
						{ this.props.router && this._getActiveLink(this.props.router.asPath) }
					</button>
					<ul className={ menuOpened ? "aside_nav open" : "aside_nav" } ref={ this.menuRef }>
						<li>
							<Link href={`/questionnaire/#main`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 1 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#main") > -1 || this.props.router.asPath.indexOf("#") < 0 ? "active" : "" }>1. Информация о лизингополучателе</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#contacts`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 2 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#contacts") > -1 ? "active" : "" }>2. Адреса лизингополучателя</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#signer`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 3 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#signer") > -1 ? "active" : "" }>3. Информация о единоличном исполнительном органе, подписанте договора лизинга</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#shareholders`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 4 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#shareholders") > -1 ? "active" : "" }>4. Сведения об участниках (акционерах) и бенефициарных владельцах</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#regulatory`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 5 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#regulatory") > -1 ? "active" : "" }>5. Сведения об органах управления</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#non-profit`} shallow>
								<a style={{ fontWeight: 400, }} disabled={ step >= 6 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#non-profit") > -1 ? "active" : "" }>6. Данные о некомерческой организации</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#check`} shallow>
								<a style={{fontWeight: 400}} disabled={ step >= 7 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#check") > -1 ? "active" : "" }>7. Проверка введеных данных</a>
							</Link>
						</li>
						<li>
							<Link href={`/questionnaire/#signing`} shallow>
								<a style={{fontWeight: 400}} disabled={ step >= 8 ? false : true } className={ this.props.router && this.props.router.asPath.indexOf("#signing") > -1 ? "active" : "" }>8. Выбор метода подписания</a>
							</Link>
						</li>
					</ul>
				</NoSSR>
			</aside>
		)
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		questionnaire: state.questionnaire, 
	};
}

export default connect(mapStateToProps)(InnerMenu);