import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';
import { connect } from "react-redux";
import { withRouter } from 'next/router';

import QuestionnaireForm from "../QuestionnaireForm";
import { reduxWrapper } from '../../../../store';
import { saveQuestionnaire } from "../../../../actions";
import FormMessage from "../FormMessage";
import { traceDebug } from "../../../../utils";

class Form_5_Regulatory extends QuestionnaireForm 
{
	constructor(props)
	{
		super(props);
		this.state = {
			main: {}, 
			loading: false, 
			status: "empty", 
			errors: [], 
		};

		this.ref_form = React.createRef();
		this.ref_submit = React.createRef();
	}

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

	componentDidMount()
	{
	}

	_handle_onFormSubmit = (event) => 
	{
		const { main } = this.state;
		event.preventDefault();
		//console.log("Form_5_Regulatory", "_handle_onFormSubmit");


		this._handle_onCheckboxFieldChange("step", 6);
		setTimeout(() => 
		{
			saveQuestionnaire();
			if(main.nko)
			{
				this.props.onNextStep("non-profit");
			}
			else
			{
				this.props.onNextStep("check");
			}
		}, 10);
	}

	_handle_onNextPage = (event) => 
	{
		//console.log("Form_1_Main", "_handle_onNextPage");

		event.preventDefault();

		const errors = [];

		const { main } = this.state;
		const check = ["high_level", "individual_executive"];

		for(let i in check)
		{
			if(main[check[i]] === "" || main[check[i]] === null || main[check[i]] === undefined)
			{
				errors.push(`main.${ check[i] }`);
			}
		}

		this.setState({ errors }, () => 
		{
			window.scroll(0, 0);
			if(errors.length === 0)
			{
				this.ref_submit.current.click();
			}
			else
			{
				traceDebug({ errors });
			}
		});
	}

	render()
	{
		const { checking } = this.props;
		const { main, loading, status, errors } = this.state; 
		const { high_level, board_of_directors, collective_executive, individual_executive, other_control, } = main;

		return (
			<React.Fragment>
				<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }} className={`questionnaire questionnaire_5 ${ checking && "disabled" }`}>
					<p className="title">5. Сведения об органах управления</p>
					<p>Заполняется юридическими лицами, индивидуальными предпринимателями не заполняется</p>
					{ errors.length > 0 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Пожалуйста, проверьте корректность заполнения данных в форме."/>
					) }
					<div className="form_field bg">
						<label>Наименование органа управления</label>
						<label>
							Персональный состав
							<small>ФИО, должность или выполняемая функция</small>
						</label>
					</div>

					<div className="form_field">
						<label>
							Высший орган управления <sup className="required_label">*</sup>
							<small>например, общее собрание акционеров, общее собрание участников, общее собрание членов, общее собрание трудового коллектива, съезд, совет и т.д.</small>
						</label>
						<textarea type="text" 
							className={ errors.indexOf("main.high_level") > -1 ? "error" : "" } 
							id={ "main.high_level" } 
							name={ "main.high_level" } 
							value={ this._checkStrValue(high_level) } 
							placeholder="Введите наименование органа управления" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ true } 
						/>
					</div>

					<div className="form_field">
						<label>
							Совет директоров
							<small>наблюдательный совет</small>
						</label>
						<input type="text" 
							id={ "main.board_of_directors" } 
							name={ "main.board_of_directors" } 
							value={ this._checkStrValue(board_of_directors) } 
							placeholder="Введите наименование" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ false } 
						/>
					</div>

					<div className="form_field">
							<label>
								Коллегиальный исполнительный орган
								<small>например, Правление, Дирекция</small>
							</label>
							<textarea type="text" 
								id={ "main.collective_executive" } 
								name={ "main.collective_executive" } 
								value={ this._checkStrValue(collective_executive) } 
								placeholder="Введите наименование" 
								onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
								required={ false } 
							/>
					</div>

					<div className="form_field">
						<label>
						Единоличный исполнительный орган <sup className="required_label">*</sup>
						<small>например, Генеральный директор, Директор, Президент. Обязательно для заполнения</small>
						</label>
						<textarea type="text" 
							className={ errors.indexOf("main.individual_executive") > -1 ? "error" : "" } 
							id={ "main.individual_executive" } 
							name={ "main.individual_executive" } 
							value={ this._checkStrValue(individual_executive) } 
							placeholder="Введите наименование должности" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ true } 
						/>
					</div>

					<div className="form_field">
						<label>Иной орган управления</label>
						<input type="text" 
							id={ "main.other_control" } 
							name={ "main.other_control" } 
							value={ this._checkStrValue(other_control) } 
							placeholder="Введите наименование" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ false } 
						/>
					</div>

					{ !checking && (
						<div className="action">
							<div></div>
							<div className="questionnaire_button_continue">
								<button type="submit" className="button button-blue" onClick={ this._handle_onNextPage }>
									{ loading ? (
										<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
										) : "Продолжить" }
								</button>
								<button ref={ this.ref_submit } type="submit" style={{ display: "none" }}/>
								{ status !== "empty" && (
									<>
										<br/><br/>
										<a style={{ cursor: "pointer" }} onClick={ this._handle_onReset }>Отменить изменения в анкете</a>
									</>
								) }
							</div>
						</div>
					) }
				</form>
			</React.Fragment>
		)
	}
}

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

export const getServerSideProps = reduxWrapper.getServerSideProps(store => 
	async ({ req, res, query }) => 
	{
    }
);

export default connect(mapStateToProps)(Form_5_Regulatory);