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 Select from 'react-select';
import { connect } from "react-redux";
import { withRouter } from 'next/router';
import { get as _get, slice } from 'lodash';

import QuestionnaireForm from "../QuestionnaireForm";
import CalendarDatePicker from '../../../CalendarDatePicker';
import citizenships from "../../../../lib/citizenships.json";
import doctypes_personal from "../../../../lib/doctypes_personal.json";
import { reduxWrapper } from '../../../../store';
import AddressSuggests from "../../AddressSuggests";
import InputMask from 'react-input-mask';
import { getCitizenshipTitleByCode } from "../../../../utils/citizenship";
import { saveQuestionnaire } from "../../../../actions";
import SuggestsInput from "../../SuggestsInput";
import DocumentIssuerSuggestsInput from "../../DocumentIssuerSuggestsInput";

class ShareholderForm extends React.Component
{
	_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
	_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
	_handle_onFieldChange = this.props._handle_onFieldChange;
	_checkStrValue = this.props._checkStrValue;
	_removeError = this.props._removeError;
	_handle_onIssuerCodeChange = this.props._handle_onIssuerCodeChange;
	_handle_onIssuerChange = this.props._handle_onIssuerChange;

	_handle_onCitizenshipChange = (name, value) => 
	{
		console.log("_handle_onCitizenshipChange", value);

		let citizenship = getCitizenshipTitleByCode(value);
		this._handle_onFieldChange(name, {
			title: citizenship, 
			code: value, 
		});
	}

	render()
	{
		const { index, shareholder, checking, errors } = this.props;

		let citizenship = { label: getCitizenshipTitleByCode(shareholder.identity_document.citizenship.code), code: shareholder.identity_document.citizenship.code };
		console.log("shareholder", "citizenship", citizenship);
		console.log("shareholder", shareholder);

		return (
			<React.Fragment>
				<div className="form_field">
					<label>Фамилия <sup className="required_label">*</sup></label>
					<SuggestsInput 
						type="lastname" 
						id={ `founder_persons[${ index }].lastname` } 
						name={ `founder_persons[${ index }].lastname` } 
						value={ this._checkStrValue(shareholder.lastname) } 
						placeholder="Введите фамилию" 
						onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].lastname`, value) } 
						required={ true } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Имя <sup className="required_label">*</sup></label>
					<SuggestsInput 
						type="firstname" 
						id={ `founder_persons[${ index }].firstname` } 
						name={ `founder_persons[${ index }].firstname` } 
						value={ this._checkStrValue(shareholder.firstname) } 
						placeholder="Введите имя" 
						onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].firstname`, value) } 
						required={ true } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Отчество <small>если имеется</small></label>
					<SuggestsInput 
						type="middlename" 
						id={ `founder_persons[${ index }].middlename` } 
						name={ `founder_persons[${ index }].middlename` } 
						value={ this._checkStrValue(shareholder.middlename) } 
						placeholder="Введите отчество" 
						onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].middlename`, value) } 
						required={ false } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Должность <sup className="required_label">*</sup><small>если имеется</small></label>
					<input type="text" 
						id={ `founder_persons[${ index }].jobtitle` } 
						name={ `founder_persons[${ index }].jobtitle` } 
						value={ this._checkStrValue(shareholder.jobtitle) } 
						placeholder="Введите должность" 
						onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
						required={ false } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Телефон <sup className="required_label">*</sup></label>
					<InputMask 
						mask='+7 (999) 999 99 99' 
						id={ `founder_persons[${ index }].telephone` } 
						name={ `founder_persons[${ index }].telephone` } 
						value={ this._checkStrValue(shareholder.telephone) } 
						placeholder="Введите номер телефона" 
						onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
						required={ true } 
						disabled={ checking }
					/>
				</div>

				<div className="form_field">
					<label>Адрес E-mail <sup className="required_label">*</sup></label>
					<input type="text" 
						id={ `founder_persons[${ index }].email` } 
						name={ `founder_persons[${ index }].email` } 
						value={ this._checkStrValue(shareholder.email) } 
						placeholder="Введите E-mail" 
						onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
						required={ true } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Тип документа <sup className="required_label">*</sup></label>
					<Select 
						id={ `founder_persons[${ index }].identity_document.doctype` } 
						name={ `founder_persons[${ index }].identity_document.doctype` } 
						options={ doctypes_personal } 
						placeholder="Выберите тип документа" 
						noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
						isSearchable={ true } 
						className="autocomlete" 
						classNamePrefix="react-select" 
						value={ doctypes_personal.filter((type) => shareholder.identity_document.doctype === type.value) } 
						onChange={ (element) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.doctype`, element.value) } 
						required={ true } 
						isDisabled={ checking } 
					/>
				</div>

				<div className="form_field ">
					<div className="form_field">
						<label>Серия и номер паспорта <sup className="required_label">*</sup></label>
						<div className="formgroup">
							<div className="form_field">
								<InputMask 
									mask='9999' 
									id={ `founder_persons[${ index }].identity_document.seria` } 
									name={ `founder_persons[${ index }].identity_document.seria` } 
									value={ this._checkStrValue(shareholder.identity_document.seria) } 
									placeholder="Введите серию" 
									onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>
							<div className="form_field">
								<InputMask 
									mask='999999' 
									id={ `founder_persons[${ index }].identity_document.docnumber` } 
									name={ `founder_persons[${ index }].identity_document.docnumber` } 
									value={ this._checkStrValue(shareholder.identity_document.docnumber) } 
									placeholder="Введите номер" 
									onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>
						</div>
					</div>
				</div>

				<div className="form_field ">
					<div className="form_field">
						<label>Дата выдачи и код подразделения <sup className="required_label">*</sup></label>
						<div className="formgroup">
							<div className="form_field">
								<CalendarDatePicker 
									//style={{ width: "calc(100% - 198px)" }} 
									placeholder="ДД.ММ.ГГГГ" 
									id={ `founder_persons[${ index }].identity_document.issuedate` } 
									value={ this._checkStrValue(shareholder.identity_document.issuedate) !== "" ? this._checkStrValue(shareholder.identity_document.issuedate) : null } 
									onChange={ (date) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.issuedate`, date) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>
							<div className="form_field">
								<DocumentIssuerSuggestsInput 
									style={{ width: "calc(100% - 198px)" }} 
									innerStyle={{ width: "100%", }} 
									className={ errors.indexOf(`founder_persons[${ index }].identity_document.code`) > -1 ? "error" : "" } 
									type="issuer" 
									id={ `founder_persons[${ index }].identity_document.code` } 
									name={ `founder_persons[${ index }].identity_document.code` } 
									value={ this._checkStrValue(shareholder.identity_document.code) } 
									placeholder="Введите код" 
									onChange={ (value) => { this._handle_onIssuerCodeChange(`founder_persons[${ index }]`, index, value); } } 
									maxResults={ 5 } 
									required={ true } 
									disabled={ checking } 
								/>
								{/*}
								<InputMask 
									mask='999-999' 
									id={ `founder_persons[${ index }].identity_document.code` } 
									name={ `founder_persons[${ index }].identity_document.code` } 
									value={ this._checkStrValue(shareholder.identity_document.code) } 
									placeholder="Введите код" 
									onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
									required={ true } 
									disabled={ checking } 
								/>
								{*/}
							</div>
						</div>
					</div>
				</div>

				<div className="form_field">
					<label>Кем выдан <sup className="required_label">*</sup></label>
					<DocumentIssuerSuggestsInput 
						className={ errors.indexOf(`founder_persons[${ index }].identity_document.issueby`) > -1 ? "error" : "" } 
						type="issuer" 
						id={ `founder_persons[${ index }].identity_document.issueby` } 
						name={ `founder_persons[${ index }].identity_document.issueby` } 
						value={ this._checkStrValue(shareholder.identity_document.issueby) } 
						placeholder="Введите наименование подразделения выдавшего документ" 
						onChange={ (value) => { this._handle_onIssuerChange(`founder_persons[${ index }]`, index, value); } } 
						maxResults={ 10 } 
						required={ true } 
						disabled={ checking } 
					/>
					{/*}
					<input type="text" 
						id={ `founder_persons[${ index }].identity_document.issueby` } 
						name={ `founder_persons[${ index }].identity_document.issueby` } 
						value={ this._checkStrValue(shareholder.identity_document.issueby) } 
						placeholder="Введите наименование подразделения выдавшего документ" 
						onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
						required={ true } 
						disabled={ checking } 
					/>
					{*/}
				</div>

				<div className="form_field" style={{ flex: 1 }}>
					<label>Место рождения <sup className="required_label">*</sup></label>
					<AddressSuggests 
						id={ `founder_persons[${ index }].identity_document.placebirth` } 
						value={ this._checkStrValue(shareholder.identity_document.placebirth) } 
						onChange={ (data) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.placebirth`, data.name) } 
						required={ true } 
						disabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Гражданство <sup className="required_label">*</sup></label>
					<Select 
						id={ `founder_persons[${ index }].identity_document.citizenship` } 
						name={ `founder_persons[${ index }].identity_document.citizenship` } 
						options={ [ ...citizenships ] } 
						placeholder="Выберите страну" 
						noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
						isSearchable={ true } 
						className="autocomlete" 
						classNamePrefix="react-select" 
						value={ citizenship.code !== null ? citizenship : undefined } 
						onChange={ (element) => this._handle_onCitizenshipChange(`founder_persons[${ index }].identity_document.citizenship`, element.value) } 
						required={ true } 
						isDisabled={ checking } 
					/>
				</div>

				<div className="form_field">
					<label>Адрес регистрации <sup className="required_label">*</sup></label>
					<AddressSuggests 
						id={ `founder_persons[${ index }].identity_document.registration_address` } 
						value={ this._checkStrValue(shareholder.identity_document.registration_address.name) } 
						fias={ this._checkStrValue(shareholder.identity_document.registration_address.fias_id) } 
						onChange={ (data) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.registration_address`, data) } 
						required={ true } 
						disabled={ checking } 
					/>
				</div>

			</React.Fragment>
		)
	}
}

class Shareholder extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {};
	}

	_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
	_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
	_checkStrValue = this.props._checkStrValue;
	_removeError = this.props._removeError;

	_checkContactListDisabled = (check) => 
	{
		const { shareholders } = this.props;
		for(let i in shareholders)
		{
			const shareholder = shareholders[i];
			const hash = `${ shareholder.lastname }_${ shareholder.firstname }_${ shareholder.middlename }`;

			if(hash === check)
			{
				return true;
			}
		}

		return false;
	}

	render()
	{
		const { index, shareholders, removeShareholder, signatories, contacts, changeFounderSelectionFromList, clearFounderFromListSelection, checking, errors, } = this.props;
		const shareholder = shareholders[index];

		return (
			<React.Fragment>
				<div className="added_person">

					{ index > 0 && (
						<div className="form_field">
							<label>Физическое лицо { index + 1 }</label>
							<div className="formgroup control">

								{ !checking && (
									<div className="form_field checkbox">
										<input type="checkbox" hidden="" 
											checked={ shareholder.founder_from_list } 
											id={ `founder_persons[${ index }].founder_from_list` } 
											name={ `founder_persons[${ index }].founder_from_list` } 
											onChange={ (event) => clearFounderFromListSelection(`founder_persons[${ index }]`, { founder_from_list: !shareholder.founder_from_list ? true : false, lastname: "", firstname: "", middlename: "", no_middle_name: false, }) } 
											/>
										<label className="unselectable" htmlFor={ `founder_persons[${ index }].founder_from_list` }>Выбрать из списка</label>
									</div>
								) }

								{ !checking && (
									<button className="delete" onClick={ (event) => { event.preventDefault(); removeShareholder(index) } }>
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M20.25 5.25L3.75 5.25001" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
											<path d="M9.75 9.75V15.75" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
											<path d="M14.25 9.75V15.75" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
											<path d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
											<path d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
										</svg>
									</button>
								) }

							</div>
						</div>
					) }

					{ index > 0 ? (
						<React.Fragment>
							{ shareholder.founder_from_list ? (
								<div className="feed">
									<div className="feed_list">

										{ contacts !== undefined && contacts !== null && contacts.map((contact, s_index) => 
										{
											const hash = `${ contact.lastname }_${ contact.firstname }_${ contact.middlename }`;
											const disabled = hash !== shareholder.hash ? this._checkContactListDisabled(hash) : false;

											if(checking)
											{
												if(shareholder.hash !== hash)
												{
													return null;
												}
											}

											return (
												<div className="form_field checkbox" key={ s_index }>
													<input type="radio" hidden="" 
														id={ `founder_persons[${ index }].contact_${ hash }` } 
														name={ `founder_persons[${ index }].contact_${ hash }` } 
														checked={ hash === shareholder.hash } 
														onChange={ () => changeFounderSelectionFromList(`founder_persons[${ index }]`, { ...shareholder, ...contact, ...{
															founder_from_list: false, 
															founder_number: shareholders.length, 
														} }) } 
														disabled={ disabled } 
													/>
													<label className="unselectable" style={ disabled ? { opacity: "0.5" } : {} } htmlFor={ `founder_persons[${ index }].contact_${ hash }` }>
														<div className="feed_item user">
															<img src="/assets/images/icons/avatar.svg" alt="" />
															<div>
																<p className="item_title">{ contact.lastname } { contact.firstname } { contact.middlename }</p>
																<p className="item_desc">
																	<span>{ contact.jobtitle }</span>
																</p>
															</div>
														</div>
													</label>
												</div>
											); 
										}) }
									</div>
								</div>
							) : (
								<ShareholderForm index={ index } shareholder={ shareholder } { ...this.props } />
							) }
						</React.Fragment>
					) : (
						<ShareholderForm index={ index } shareholder={ shareholder } { ...this.props } />
					) }

					<div className="form_field">
						<label>Доля в уставном капитале (%) <sup className="required_label">*</sup></label>
						<InputMask 
							className={ errors.indexOf("founder_part") > -1 ? "error" : "" } 
							mask='999' 
							formatChars={{ '9': '[0-9]', }} 
							id={ `founder_persons[${ index }].founder_part` } 
							name={ `founder_persons[${ index }].founder_part` } 
							value={ this._checkStrValue(shareholder.founder_part) } 
							placeholder="Укажите размер доли" 
							onChange={ (event) => { this._removeError("founder_part"); this._handle_onTextFieldChange(event.target.name, event.target.value > 100 ? 100 : event.target.value); } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field">
						<label>Является ли бенифиальным владельцем</label>
						<div className="formgroup">
							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="1" 
									id={ `founder_persons[${ index }].is_beneficial_1` } 
									name={ `founder_persons[${ index }].is_beneficial` } 
									checked={ shareholder.is_beneficial ? true : false } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) } 
									disabled={ checking } 
								/>
								<label className="unselectable" htmlFor={ `founder_persons[${ index }].is_beneficial_1` }>Да</label>
							</div>
							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="0" 
									id={ `founder_persons[${ index }].is_beneficial_0` } 
									name={ `founder_persons[${ index }].is_beneficial` } 
									checked={ shareholder.is_beneficial ? false : true } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) } 
									disabled={ checking } 
								/>
								<label className="unselectable" htmlFor={ `founder_persons[${ index }].is_beneficial_0` }>Нет</label>
							</div>
						</div>
					</div>
				</div>

			</React.Fragment>
		)
	}
}

class Form_4_Shareholders extends QuestionnaireForm 
{
	constructor(props)
	{
		super(props);
		this.state = {
			founder_persons: [], 
			founder_persons_template: {
				signatory_id: null, 
				lastname: null, 
				firstname: null, 
				middlename: null, 
				no_middle_name: false, 
				jobtitle: null, 
				telephone: null, 
				email: null, 
				founder_from_list: true, 
				founder_number: 0, 
				founder_part: null, 
				is_beneficial: false, 
				identity_document: 
				{
					doctype: 100000000, 
					seria: null, 
					docnumber: null, 
					issuedate: null, 
					code: null, 
					issueby: null, 
					issueby_search_dadata: null, 
					placebirth: null, 
					citizenship: {
						title: null, 
						code: null, 
					}, 
					registration_address: {
						name: null, 
						fias_id: null, 
					}
				}
			}, 
			loading: false, 
			status: "empty", 
			errors: [
				[], [], [], []
			], 
			client_contacts: [], 
		};

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

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

	componentDidMount()
	{
		console.log("Form_4_Shareholders", "this.state", this.state);
		console.log("Form_4_Shareholders", "global.store.getState()", global.store.getState());
		const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));

		if(this.state.founder_persons.length === 0)
		{
			this._updateQuestionnaire({
				founder_persons: [{ ...founder_persons_template, ...{ founder_from_list: false, founder_number: this.state.founder_persons.length + 1 } }], 
			});
		}
	}

	_handle_onAddShareholder = () => 
	{
		console.log("_handle_onAddShareholder");

		const founder_persons = [ ...this.state.founder_persons ];
		const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));

		console.log("_handle_onAddShareholder", { founder_persons_template });

		if(founder_persons.length < 4)
		{
			founder_persons.push(founder_persons_template);

			this._updateQuestionnaire({
				founder_persons, 
			});
		}
	}

	_handle_onRemoveShareholder = (index) => 
	{
		const founder_persons = [ ...this.state.founder_persons ];

		founder_persons.splice(index, 1);

		this._updateQuestionnaire({
			founder_persons, 
		});
	}

	_handle_onClearFounderFromListSelection = (name, values) => 
	{
		const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));
		const update = { ...founder_persons_template , ...values };
		console.log("_handle_onClearFounderFromListSelection", update);
		this._handle_onFieldChange(name, update );
	}

	_handle_onChangeFounderSelectionFromList = (name, values) => 
	{
		console.log("_handle_onChangeFounderSelectionFromList");
		console.log(name, values);

		this._handle_onFieldChange(name, { ...values } );
	}

	_handle_onIssuerCodeChange = (branch, index, option) => 
	{
		this._onRemoveError(index, `${ branch }.identity_document.code`); 

		if(typeof option === "string")
		{
			this._handle_onTextFieldChange(`${ branch }.identity_document.code`, option);
		}
		else
		{
			this._handle_onBranchChange([ 
				{ name: `${ branch }.identity_document.code`, value: option.data.code }, 
				{ name: `${ branch }.identity_document.issueby`, value: option.value }, 
			]);
		}
	}

	_handle_onIssuerChange = (branch, index, option) => 
	{
		this._onRemoveError(index, `${ branch }.identity_document.issueby`); 

		if(typeof option === "string")
		{
			this._handle_onTextFieldChange(`${ branch }.identity_document.issueby`, option);
		}
		else
		{
			this._handle_onBranchChange([ 
				{ name: `${ branch }.identity_document.code`, value: option.data.code }, 
				{ name: `${ branch }.identity_document.issueby`, value: option.value }, 
			]);
		}
	}

	
	_handle_onFormSubmit = (event) => 
	{
		event.preventDefault();
		console.log("Form_4_Shareholders", "_handle_onFormSubmit");

		this._handle_onCheckboxFieldChange("step", 5);
		setTimeout(() => 
		{
			saveQuestionnaire();
			this.props.onNextStep("regulatory");
		}, 10);
	}

	_handle_onNextPage = () => 
	{
		const errors = [
			[], [], [], []
		];

		const { founder_persons } = this.state;

		const check = [
			"founder_part", 
			"lastname", 
			"firstname", 
			"telephone", 
			"email", 
			"identity_document.seria", 
			"identity_document.docnumber", 
			"identity_document.issuedate", 
			"identity_document.icode", 
			"identity_document.issueby", 
			"identity_document.placebirth", 
			"identity_document.citizenship.code", 
			"identity_document.registration_address.title", 
		];

		if(parseInt(_get("signatory_person.identity_document.doctype"), 10) === 100000000)
		{
		}

		for(let f in founder_persons)
		{
			for(let i in check)
			{
				if(_get(founder_persons[f], check[i]) === "")
				{
					errors[f].push(check[i]);
				}
			}
		}

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

	_onRemoveError = (index, name) => 
	{
		const errors = [ ...this.state.errors ];
		if(errors.indexOf(name) > -1)
		{
			errors[index].splice(errors[index].indexOf(name), 1);
		}
		this.setState({ errors });
	}

	_checkErrorsList = () => 
	{
		const { errors } = this.state;

		for(let i in errors)
		{
			if(errors[i].length > 0)
			{
				return true;
			}
		}

		return false;
	}

	render()
	{
		const { checking } = this.props;
		const { founder_persons, client_contacts, loading, address, status, errors, } = this.state;

		//console.log("questionnaire", questionnaire);

		return (
			<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }} className={`questionnaire questionnaire_4 ${ checking && "disabled" }`}>
				<p className="title">4. Сведения об участниках (акционерах) и бенефициарных владельцах</p>
				<p>– физических лицах, владеющих долей в уставном капитале более 25%
					<small>*бенефициарный владелец (в соответствии с Федеральным законом от 07.08.2001 No115-ФЗ «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма») —
физическое лицо, которое в конечном счете прямо или косвенно (через третьих лиц) владеет (имеет преобладающее участие более 25 процентов в капитале) вышеуказанным лизингополучателем-юридическим лицом, либо
имеет возможность контролировать действия вышеуказанного лизингополучателя. Бенефициарным владельцем лизингополучателя-физического лица считается это лицо, за исключением случаев, если имеются основания
полагать, что бенефициарным владельцем является иное физическое лицо. В случае, если бенефициарным владельцем являются несколько человек, сведения предоставляются в отношении каждого.</small>
				</p>
				{ this._checkErrorsList() && 
				( 
					<div className="questionnaire message error">
						<svg width="44" height="45" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M40.5425 31.1863L25.7969 8.08116C24.9653 6.77804 23.5459 6 22 6C20.4539 6 19.0345 6.77804 18.2032 8.08116L3.45741 31.1862C2.57234 32.5732 2.51363 34.3313 3.30467 35.7746C4.09572 37.2173 5.60918 38.1137 7.25444 38.1137H36.7456C38.3909 38.1137 39.9044 37.2175 40.6956 35.7742C41.4863 34.3313 41.4276 32.5733 40.5425 31.1863ZM22 34.2245C20.644 34.2245 19.5448 33.1252 19.5448 31.7694C19.5448 30.4133 20.6441 29.3141 22 29.3141C23.356 29.3141 24.4551 30.4133 24.4551 31.7694C24.4551 33.1252 23.3559 34.2245 22 34.2245ZM25.403 17.1635L24.1937 25.3052C24.0157 26.5037 22.8999 27.3309 21.7016 27.1529C20.7334 27.0091 20.0075 26.25 19.8582 25.333L18.5451 17.2074C18.2394 15.3155 19.5251 13.534 21.417 13.2283C23.3089 12.9226 25.0904 14.2083 25.3962 16.1002C25.4536 16.4565 25.4517 16.8243 25.403 17.1635Z" fill="white"/>
						</svg>
						<p><b>Ошибка</b>
							Пожалуйста, проверьте корректность заполнения данных в форме.
						</p>
					</div>
				) }
				{ founder_persons.map((shareholder, index) => (
					<Shareholder 
						key={ index } 
						index={ index } 
						shareholders={ founder_persons } 
						address={ address } 
						errors={ errors[index] } 
						_handle_onTextFieldChange={ this._handle_onTextFieldChange } 
						_handle_onCheckboxFieldChange={ this._handle_onCheckboxFieldChange } 
						_handle_onFieldChange={ this._handle_onFieldChange } 
						_handle_onIssuerCodeChange={ this._handle_onIssuerCodeChange } 
						_handle_onIssuerChange={ this._handle_onIssuerChange } 
						_checkStrValue={ this._checkStrValue } 
						_removeError={ (name) => this._onRemoveError(index, name) } 
						removeShareholder={ this._handle_onRemoveShareholder } 
						clearFounderFromListSelection={ this._handle_onClearFounderFromListSelection } 
						changeFounderSelectionFromList={ this._handle_onChangeFounderSelectionFromList } 
						contacts={ client_contacts } 
						checking={ checking } 
					/>
				)) }

				{ !checking && (
					<div className="action">
						{ founder_persons.length < 4 ? (
							<button className="button button-blue" disabled={ false } onClick={ (event) => { event.preventDefault(); this._handle_onAddShareholder(); }}>Добавить еще одного владельца</button>
						) : (
							<div></div>
						) }
						<div>
							<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>
		)
	}
}

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

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

export default connect(mapStateToProps)(Form_4_Shareholders);