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 } from 'lodash';

import QuestionnaireForm from "../QuestionnaireForm";
import CalendarDatePicker from '../../../CalendarDatePicker';
import FilesList from "../FilesList";
import Modal from "../../../../pages/components/Modal/modal";
import countries from "../../../../lib/countries.json";
import citizenships from "../../../../lib/citizenships.json";
import doctypes_personal from "../../../../lib/doctypes_personal.json";
import doctypes_corporate from "../../../../lib/doctypes_corporate.json";
import { reduxWrapper } from '../../../../store';
import moment from "moment";
import AddressSuggests from "../../AddressSuggests";
import InputMask from 'react-input-mask';
import SuggestsInput from "../../SuggestsInput";
import { getCitizenshipTitleByCode } from "../../../../utils/citizenship";
import { removeAttachmentFiles, saveQuestionnaire } from "../../../../actions";

class Form_3_Signer extends QuestionnaireForm
{
	constructor(props)
	{
		super(props);
		this.state = {
			main: {
				title: null, 
				inn: null, 
				kpp: null, 
				email: null, 
				telephone: null, 
				websiteurl: null, 
				financial_loan: null, 
				is_individual_executive: false, 
				individual_executive_inn: "", 
				individual_executive_kpp: "", 
				individual_executive_oop: "", 
				individual_executive_docnum: "", 
				individual_executive_docdate: "", 
				high_level: "", 
				board_of_directors: "", 
				collective_executive: "", 
				individual_executive: "", 
				other_control: "", 
			}, 
			head_person: {
				lastname: "", 
				firstname: "", 
				middlename: "", 
				no_middle_name: false, 
				jobtitle: "Генеральный директор", 
				telephone: "", 
				email: "", 
				identity_document: {
					doctype: "", 
					seria: "", 
					docnumber: "", 
					issuedate: "", 
					code: "", 
					issueby: "", 
					issueby_search_dadata: "", 
					placebirth: "", 
					citizenship: {
						title: "", 
						code: "", 
					}, 
					registration_address: {
						name: "", 
						fias_id: "", 
					}
				}, 
				evo_assignment_date: "", 
				evo_credentials_dateend: "", 
				evo_indefinite: false, 
			}, 
			signatory_person: {
				not_head_person: false, 
				lastname: "", 
				firstname: "", 
				middlename: "", 
				no_middle_name: false, 
				jobtitle: "", 
				signer_rule_basis: "", 
				signer_rule_basis_add: "", 
				docdate: "", 
				docnumber: "", 
				delegation_agreement: false, 
				telephone: "", 
				email: "", 
				identity_document: {
					docype: "", 
					seria: "", 
					docnumber: "", 
					issuedate: "", 
					code: "", 
					issueby: "", 
					issueby_search_dadata: "", 
					placebirth: "", 
					citizenship: {
						title: "", 
						code: "", 
					}, 
					registration_address: {
						name: "", 
						fias_id: "", 
					}
				}
			}, 
			delegation_files: [], 
			head_person_files: [], 
			signatory_person_files: [], 
			signatory_corporate_files: [], 
			loading: false, 
			modal_show_personal_data: false, 
			status: "empty", 
			errors: [], 
		};

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

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			main: nextProps.questionnaire.main, 
			head_person: nextProps.questionnaire.head_person, 
			head_person_files: nextProps.questionnaire.head_person_files, 
			delegation_files: nextProps.questionnaire.delegation_files, 
			signatory_person: nextProps.questionnaire.signatory_person, 
			signatory_person_files: nextProps.questionnaire.signatory_person_files, 
			signatory_corporate_files: nextProps.questionnaire.signatory_corporate_files, 
			status: nextProps.questionnaire.status, 
		};
	}

	componentDidMount()
	{
		const { main } = this.state;
		if( main.inn !== null && main.inn.length === 12)
		{
			this._handle_onCheckboxFieldChange("head_person.evo_indefinite", true);
		}
	}

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

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

	_handle_onIndefiniteChange = () => 
	{
		const { head_person } = this.state;
		const indefinite = !head_person.evo_indefinite ? true : false;
		this._handle_onCheckboxFieldChange("head_person.evo_indefinite", indefinite);

		if(!indefinite)
		{
			setTimeout(() => 
			{
				this._handle_onCheckboxFieldChange("head_person.evo_credentials_dateend", "");
			}, 10);
		}
	}

	_handle_onChangeDelegationAgreement = () => 
	{
		const { signatory_person, delegation_files } = this.state;

		if(!signatory_person.delegation_agreement)
		{
			this._handle_onCheckboxFieldChange("signatory_person.delegation_agreement", true);
		}
		else
		{
			removeAttachmentFiles(delegation_files);

			this._handle_onBranchChange([
				{ name: "signatory_person.delegation_agreement", value: false, }, 
				{ name: "main.individual_executive_inn", value: "", }, 
				{ name: "main.individual_executive_kpp", value: "", }, 
				{ name: "main.individual_executive_oop", value: "", }, 
				{ name: "main.individual_executive_docnum", value: "", }, 
				{ name: "main.individual_executive_docdate", value: "", }, 
				{ name: "delegation_files", value: [], }, 
			]);
		}
	}

	_handle_onNextPage = (event) => 
	{
		console.log("Form_3_Signer", "_handle_onNextPage");
		event.preventDefault();

		const errors = [];
		const { main, head_person, signatory_person, } = this.state;

		const head_person_check = [
			"lastname", 
			"firstname", 
			"jobtitle", 
			"telephone", 
			"email", 
			"identity_document.seria", 
			"identity_document.docnumber", 
			"identity_document.issuedate", 
			"identity_document.code", 
			"identity_document.issueby", 
			"identity_document.placebirth", 
			"identity_document.citizenship_code", 
			"identity_document.registration_address.title", 
			"evo_assignment_date", 
		];

		for(let i in head_person_check)
		{
			let v = _get(head_person, head_person_check[i]);
			
			if(v === "" || v === null)
			{
				errors.push(`head_person.${ head_person_check[i] }`);
			}
		}

		console.log({ errors });

		if(!head_person.evo_indefinite)
		{
			if(head_person.evo_credentials_dateend === "")
			{
				errors.push(`head_person.evo_credentials_dateend`);
			}
		}

		//переданы
		if(signatory_person.delegation_agreement)
		{
			const main_check = [
				"individual_executive_inn", 
				"individual_executive_kpp", 
				"individual_executive_oop", 
				"individual_executive_docnum", 
				"individual_executive_docdate", 
			];

			for(let i in main_check)
			{
				let v = _get(main, main_check[i]);

				if(v === "" || v === null)
				{
					errors.push(`main.${ main_check[i] }`);
				}
			}	
		}

		//иной подписант
		if(signatory_person.not_head_person)
		{
			const signatory_person_check = [
				"lastname", 
				"firstname", 
				"jobtitle", 
				"signer_rule_basis", 
				"telephone", 
				"email", 
				"identity_document.seria", 
				"identity_document.docnumber", 
				"identity_document.issuedate", 
				"identity_document.code", 
				"identity_document.issueby", 
				"identity_document.placebirth", 
				"identity_document.citizenship.code", 
				"identity_document.registration_address.title", 
			];

			if(signatory_person.signer_rule_basis === 100000003)
			{
				signatory_person_check.push("signer_rule_basis_add");
			}

			if(signatory_person.signer_rule_basis === 100000001 || signatory_person.signer_rule_basis === 100000003)
			{
				signatory_person_check.push("docdate");
				signatory_person_check.push("docnumber");
			}

			for(let i in signatory_person_check)
			{
				let v = _get(signatory_person, signatory_person_check[i]);

				if(v === "" || v === null)
				{
					errors.push(`signatory_person.${ signatory_person_check[i] }`);
				}
			}
		}

		this.setState({ errors }, () => 
		{
			this.ref_submit.current.click();
		});
		//this.ref_form.current.submit();
		//this.ref_form.current.dispatchEvent(new Event('submit', { cancelable: true }));
	}

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

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

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

	render()
	{
		const { checking } = this.props;
		const {
			personal_data_consent, 
			head_person_files, 
			signatory_person_files, 
			signatory_corporate_files, 
			delegation_files, 
			modal_show_personal_data, 
			errors, 
		} = this.state;

		console.log("delegation_files", delegation_files);

		
		const { loading, } = this.state;
		const { main, head_person, signatory_person, status } = this.state;
		
		console.log("head_person.evo_assignment_date", head_person.evo_assignment_date);

		let head_person_citizenship = { label: getCitizenshipTitleByCode(head_person.identity_document.citizenship.code), code: head_person.identity_document.citizenship.code };
		let signatory_person_citizenship = { label: getCitizenshipTitleByCode(signatory_person.identity_document.citizenship.code), code: signatory_person.identity_document.citizenship.code };

		return (
			<React.Fragment>
				<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } className={`questionnaire questionnaire_3 ${ checking && "disabled" }`} onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }}>
					<p className="title">3. Информация о единоличном исполнительном органе, подписанте договора лизинга</p>
					<div className="form_field">
						<label>Фамилия <sup className="required_label">*</sup></label>
						<SuggestsInput 
							className={ errors.indexOf("head_person.lastname") > -1 ? "error" : "" } 
							type="lastname" 
							id="head_person.lastname" 
							name="head_person.lastname" 
							value={ this._checkStrValue(head_person.lastname) } 
							placeholder="Введите фамилию" 
							onChange={ (value) => { this._removeError("head_person.lastname"); this._handle_onTextFieldChange("head_person.lastname", value); } }
							required={ true } 
							disabled={ checking } 
						/>
						{/*}
						<input type="text" 
							id="head_person.lastname" 
							name="head_person.lastname" 
							value={ head_person.lastname } 
							placeholder="Введите фамилию" 
							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>
						<SuggestsInput 
							className={ errors.indexOf("head_person.firstname") > -1 ? "error" : "" } 
							type="firstname" 
							id="head_person.firstname" 
							name="head_person.firstname" 
							value={ this._checkStrValue(head_person.firstname) } 
							placeholder="Введите имя" 
							onChange={ (value) => { this._removeError("head_person.firstname"); this._handle_onTextFieldChange("head_person.firstname", value) } } 
							required={ true } 
							disabled={ checking } 
						/>
						{/*}
						<input type="text" 
							id="head_person.firstname" 
							name="head_person.firstname" 
							value={ head_person.firstname } 
							placeholder="Введите имя" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ true } 
							disabled={ checking } 
						/>
						{*/}
					</div>
					<div className="form_field">
						<label>Отчество <small>если имеется</small></label>
						<SuggestsInput 
							className={ errors.indexOf("head_person.middlename") > -1 ? "error" : "" } 
							type="middlename" 
							id="head_person.middlename" 
							name="head_person.middlename" 
							value={ this._checkStrValue(head_person.middlename) } 
							placeholder="Введите отчество" 
							onChange={ (value) => { this._removeError("head_person.middlename"); this._handle_onTextFieldChange("head_person.middlename", value) } } 
							required={ false } 
							disabled={ checking } 
						/>
						{/*}
						<input type="text" 
							id="head_person.middlename" 
							name="head_person.middlename" 
							value={ head_person.middlename } 
							placeholder="Введите отчество" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							disabled={ checking } 
						/>
						{*/}
					</div>
					<div className="form_field">
						<label>Тип документа <sup className="required_label">*</sup></label>
						<Select 
							id="head_person.identity_document.doctype" 
							name="head_person.identity_document.doctype" 
							options={ doctypes_personal } 
							placeholder="Выберите тип документа" 
							noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
							isSearchable={ true } 
							className="autocomlete" 
							classNamePrefix="react-select" 
							value={ doctypes_personal.filter((type) => head_person.identity_document.doctype === type.value) } 
							onChange={ (element) => this._handle_onTextFieldChange(`head_person.identity_document.doctype`, element.value) } 
							required={ true } 
							isDisabled={ checking } 
						/>
					</div>
					<div className="formgroup">

						<div className="form_field">
							<label>Серия паспорта <sup className="required_label">*</sup></label>
							<InputMask 
								className={ errors.indexOf("head_person.identity_document.seria") > -1 ? "error" : "" } 
								mask='9999' 
								id="head_person.identity_document.seria" 
								name="head_person.identity_document.seria" 
								value={ this._checkStrValue(head_person.identity_document.seria) } 
								placeholder="Введите серию" 
								onChange={ (event) => { this._removeError("head_person.identity_document.seria"); 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>
							<InputMask 
								className={ errors.indexOf("head_person.identity_document.docnumber") > -1 ? "error" : "" } 
								mask='999999' 
								id="head_person.identity_document.docnumber" 
								name="head_person.identity_document.docnumber" 
								value={ this._checkStrValue(head_person.identity_document.docnumber) } 
								placeholder="Введите номер" 
								onChange={ (event) => { this._removeError("head_person.identity_document.docnumber"); this._handle_onTextFieldChange(event.target.name, event.target.value) } } 
								required={ true } 
								disabled={ checking }>
							</InputMask>
						</div>

					</div>
					<div className="formgroup">
						<div className="form_field">
							<label>Дата выдачи <sup className="required_label">*</sup></label>
							<CalendarDatePicker 
								placeholder="ДД.ММ.ГГГГ" 
								id={ "head_person.identity_document.issuedate" } 
								value={ this._checkStrValue(head_person.identity_document.issuedate) !== "" ? this._checkStrValue(head_person.identity_document.issuedate) : null } 
								onChange={ (date) => { this._removeError("head_person.identity_document.issuedate"); this._handle_onTextFieldChange("head_person.identity_document.issuedate", date) } } 
								required={ true } 
								disabled={ checking } 
							/>
						</div>
						<div className="form_field">
							<label>Код подразделения <sup className="required_label">*</sup></label> 
							<InputMask 
								mask='999-999' 
								id="head_person.identity_document.code" 
								name="head_person.identity_document.code" 
								value={ this._checkStrValue(head_person.identity_document.code) } 
								placeholder="Введите код" 
								onChange={ (event) => { this._removeError("head_person.identity_document.code"); this._handle_onTextFieldChange(event.target.name, event.target.value) } } 
								required={ true } 
								disabled={ checking } 
							/>
						</div>
					</div>
					<div className="form_field">
						<label>Кем выдан <sup className="required_label">*</sup></label>
						<input type="text"  
							id="head_person.identity_document.issueby" 
							name="head_person.identity_document.issueby" 
							value={ this._checkStrValue(head_person.identity_document.issueby) } 
							placeholder="Введите наименование подразделения выдавшего документ" 
							onChange={ (event) => { this._removeError("head_person.identity_document.issueby"); 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>
						<AddressSuggests 
							id={ "head_person.identity_document.placebirth" } 
							value={ this._checkStrValue(head_person.identity_document.placebirth) } 
							placeholder="Укажите место рождения" 
							onChange={ (data) => { this._removeError("head_person.identity_document.issueby"); this._handle_onTextFieldChange("head_person.identity_document.placebirth", data.title) } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Гражданство <sup className="required_label">*</sup></label>
						<Select 
							id="head_person.identity_document.citizenship" 
							name="head_person.identity_document.citizenship" 
							options={ citizenships } 
							placeholder="Выберите страну" 
							noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
							isSearchable={ true } 
							className="autocomlete" 
							classNamePrefix="react-select" 
							value={ head_person_citizenship.code !== null ? head_person_citizenship : undefined } 
							onChange={ (element) => { this._removeError("head_person.identity_document.citizenship"); this._handle_onCitizenshipChange(`head_person.identity_document.citizenship`, element.value) } } 
							required={ true } 
							isDisabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Адрес регистрации <sup className="required_label">*</sup></label>
						<AddressSuggests
							value={ this._checkStrValue(head_person.identity_document.registration_address.name) } 
							fias={ this._checkStrValue(head_person.identity_document.registration_address.fias_id) } 
							placeholder="Укажите адрес регистрации" 
							onChange={ (data) => { this._removeError("head_person.identity_document.registration_address.name"); this._handle_onTextFieldChange("head_person.identity_document.registration_address", data) } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Должность <sup className="required_label">*</sup></label>
						<input type="text" 
							className={ errors.indexOf("head_person.jobtitle") > -1 ? "error" : "" } 
							id="head_person.jobtitle" 
							name="head_person.jobtitle" 
							value={ this._checkStrValue(head_person.jobtitle) } 
							placeholder="Укажите должность" 
							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>
						<InputMask 
							mask='+7 (999) 999 99 99' 
							id={ "head_person.telephone" } 
							name={ "head_person.telephone" } 
							value={ this._checkStrValue(head_person.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={ "head_person.email" } 
							name={ "head_person.email" } 
							value={ this._checkStrValue(head_person.email) } 
							placeholder="Введите E-mail" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field picker">
						<label>Дата назначения <sup className="required_label">*</sup></label>
						<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)"}}>
							<CalendarDatePicker 
								className={ errors.indexOf("head_person.evo_assignment_date") > -1 ? "error" : "" } 
								placeholder="ДД.ММ.ГГГГ" 
								id={ "head_person.evo_assignment_date" } 
								value={ this._checkStrValue(head_person.evo_assignment_date) !== "" ? this._checkStrValue(head_person.evo_assignment_date) : null } 
								onChange={ (date) => { this._removeError("head_person.evo_assignment_date"); this._handle_onTextFieldChange("head_person.evo_assignment_date", date) } } 
								required={ true } 
								disabled={ checking } 
								style={{maxWidth: "320px"}}
							/>
							<div className="form_field checkbox" style={{width: "auto", marginLeft: "28px"}}>
								<input type="checkbox" 
									hidden="" 
									id="head_person.evo_indefinite" 
									name="head_person.evo_indefinite" 
									checked={ head_person.evo_indefinite } 
									onChange={ (event) => this._handle_onIndefiniteChange() } 
									disabled={ checking } 
								/>
								<label htmlFor="head_person.evo_indefinite" className="unselectable">Полномочия бессрочны</label>
							</div>
						</div>
					</div>
					{ !head_person.evo_indefinite && (
						<div className="form_field picker">
							<label>Дата окончания полномочий <sup className="required_label">*</sup></label>
							<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)" }}>
								<CalendarDatePicker 
									placeholder="ДД.ММ.ГГГГ" 
									id={ "head_person.evo_credentials_dateend" } 
									value={ this._checkStrValue(head_person.evo_credentials_dateend) !== "" ? this._checkStrValue(head_person.evo_credentials_dateend) : null } 
									onChange={ (date) => { console.log("date", date); this._handle_onTextFieldChange("head_person.evo_credentials_dateend", date) } } 
									required={ true } 
									disabled={ checking } 
									style={{maxWidth: "320px"}}
								/>
							</div>
						</div>
					) }

					<FilesList 
						//group="head_person" 
						name="head_person_files" 
						files={ head_person_files } 
						onAddFile={ this._handle_onAddFile } 
						onRemoveFile={ this._handle_onRemoveFile } 
						checking={ checking } 
						title="Прикрепить скан паспорта единоличного исполнительного органа" 
					/>

					{ main.inn !== null && main.inn.length < 11 && 
					(
						<React.Fragment>
							<div className="form_field">
								<div className="form_field checkbox">
									<input type="checkbox" 
										hidden="" 
										id="signatory_person.delegation_agreement" 
										name="signatory_person.delegation_agreement" 
										checked={ signatory_person.delegation_agreement } 
										onChange={ this._handle_onChangeDelegationAgreement } 
										disabled={ checking } 
									/>
									<label htmlFor="signatory_person.delegation_agreement" className="unselectable">Полномочия единоличного исполнительного органа переданы управляющей организации или управляющему</label>
								</div>
							</div>

							{ signatory_person.delegation_agreement && (
								<React.Fragment>
									<p className="title">Информация об управляющей организации или управляющем</p>

									<div className="formgroup" style={{ width: "100%" }}>
										<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
											<label>ИНН <sup className="required_label">*</sup></label>
											<InputMask 
												style={{ width: "100%" }} 
												mask='999999999999' 
												//maskPlaceholder={ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 ? "_" : " " } 
												alwaysShowMask={ false } 
												id="main.individual_executive_inn" 
												name="main.individual_executive_inn" 
												value={ this._checkStrValue(main.individual_executive_inn) } 
												placeholder="Введите ИНН" 
												onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
										{ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 && (
											<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
												<label>КПП <sup className="required_label">*</sup></label>
												<InputMask 
													style={{ width: "100%" }} 
													mask='9999999999' 
													alwaysShowMask={ false } 
													id="main.individual_executive_kpp" 
													name="main.individual_executive_kpp" 
													value={ this._checkStrValue(main.individual_executive_kpp) } 
													placeholder="Введите КПП" 
													onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
													required={ true } 
													disabled={ checking } 
												/>
											</div>
										) }
									</div>

									<div className="form_field">
										<p style={{ paddingBottom: "15px" }}><label>Организационно-правовая форма и полное наименование управляющей организации или управляющего <sup className="required_label">*</sup></label></p>
										<input type="text" 
											style={{ width: "100%" }} 
											id="main.individual_executive_oop" 
											name="main.individual_executive_oop" 
											value={ this._checkStrValue(main.individual_executive_oop) } 
											placeholder="Укажите наименование" 
											onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="formgroup" style={{ width: "100%", }}>
										<div className="form_field">
											<label style={{ width: "100%", marginBottom: "12px" }}>Номер договора о передаче полномочий управляющей организации /управляющему</label>
											<input type="text" 
												style={{ width: "100%" }} 
												id="main.individual_executive_docnum" 
												name="main.individual_executive_docnum" 
												value={ this._checkStrValue(main.individual_executive_docnum) } 
												placeholder="Номер договора" 
												onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
												disabled={ checking } 
											/>
										</div>

										<div className="form_field" style={{ alignItems: "flex-end" }}>
											<label style={{ width: "100%", alignSelf: "flex-start" }}>Дата договора</label>
											{/*}
											<input type="text" 
												style={{ width: "100%", }} 
												id="main.individual_executive_docdate" 
												name="main.individual_executive_docdate" 
												value={ this._checkStrValue(main.individual_executive_docdate) } 
												placeholder="Дата" 
												onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
												required={ true }
											/>
											{*/}
											<CalendarDatePicker 
												style={{ width: "100%", }} 
												placeholder="ДД.ММ.ГГГГ" 
												id={ "main.individual_executive_docdate" } 
												value={ this._checkStrValue(main.individual_executive_docdate) !== "" ? this._checkStrValue(main.individual_executive_docdate) : null } 
												onChange={ (date) => this._handle_onTextFieldChange("main.individual_executive_docdate", date) } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									<FilesList 
										//group="individual_executive" 
										name="delegation_files" 
										files={ delegation_files } 
										onAddFile={ this._handle_onAddFile } 
										onRemoveFile={ this._handle_onRemoveFile } 
										checking={ checking } 
									/>

								</React.Fragment>
							) }
						</React.Fragment>
					) }

					<div className="form_field">
						<div className="form_field checkbox">
							<input type="checkbox" 
								hidden="" 
								id="signatory_person.not_head_person" 
								name="signatory_person.not_head_person" 
								checked={ signatory_person.not_head_person } 
								onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !signatory_person.not_head_person ? true : false) } 
								disabled={ checking } 
							/>
							<label htmlFor="signatory_person.not_head_person" className="unselectable">Подписант отличается от единоличного исполнительного органа</label>
						</div>
					</div>

					{ signatory_person.not_head_person && (
						<React.Fragment>
							<p className="title">Информация о подписанте <small>(заполняется если подписант договора лизинга отличается от единоличного исполнительного органа)</small></p>

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

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

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

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

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

							<div className="formgroup">
								<div className="form_field">
									<label>Дата выдачи <sup className="required_label">*</sup></label>
									<CalendarDatePicker 
										style={{ width: "calc(100% - 198px)" }} 
										placeholder="ДД.ММ.ГГГГ" 
										id={ "signatory_person.identity_document.issuedate" } 
										value={ this._checkStrValue(signatory_person.identity_document.issuedate) !== "" ? this._checkStrValue(signatory_person.identity_document.issuedate) : null } 
										onChange={ (date) => this._handle_onTextFieldChange("signatory_person.identity_document.issuedate", date) } 
										required={ true } 
										disabled={ checking } 
									/>
								</div>

								<div className="form_field">
									<label>Код подразделения <sup className="required_label">*</sup></label>
									<InputMask 
										mask='999-999' 
										id="signatory_person.identity_document.code" 
										name="signatory_person.identity_document.code" 
										value={ this._checkStrValue(signatory_person.identity_document.code) } 
										placeholder="Введите код" 
										onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
										required={ true } 
										disabled={ checking } 
									/>
								</div>
							</div>

							<div className="form_field">
								<label>Кем выдан <sup className="required_label">*</sup></label>
								<input type="text" 
									id="signatory_person.identity_document.issueby" 
									name="signatory_person.identity_document.issueby" 
									value={ this._checkStrValue(signatory_person.identity_document.issueby) } 
									placeholder="Введите наименование подразделения выдавшего документ" 
									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>
								<AddressSuggests 
									id={ "signatory_person.identity_document.placebirth" } 
									value={ this._checkStrValue(signatory_person.identity_document.placebirth) } 
									placeholder="Укажите место рождения" 
									onChange={ (data) => this._handle_onTextFieldChange("signatory_person.identity_document.placebirth", data.name) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>

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

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

								{/*}
								<input type="text" 
									id="signatory_person.identity_document.registration_address.title" 
									name="signatory_person.identity_document.registration_address.title" 
									value={ this._checkStrValue(signatory_person.identity_document.registration_address.title) } 
									placeholder="Введите адрес" 
									onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
									required={ true } 
								/>
								{*/}
							</div>

							<div className="form_field">
								<label>Должность <sup className="required_label">*</sup></label>
								<input type="text" 
									id="signatory_person.jobtitle" 
									name="signatory_person.jobtitle" 
									value={ this._checkStrValue(signatory_person.jobtitle) } 
									placeholder="Укажите должность" 
									onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>

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

								<div className="form_field">
									<label>E-mail <sup className="required_label">*</sup></label>
									<input type="text" 
										id="signatory_person.email" 
										name="signatory_person.email" 
										value={ this._checkStrValue(signatory_person.email) } 
										placeholder="E-mail" 
										onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
										required={ true } 
										disabled={ checking } 
									/>
								</div>
							</div>

							<FilesList 
								//group="signatory_person" 
								title="Прикрепить скан паспорта подписанта" 
								name="signatory_person_files" 
								files={ signatory_person_files } 
								onAddFile={ this._handle_onAddFile } 
								onRemoveFile={ this._handle_onRemoveFile } 
								checking={ checking } 
							/>

							<p><b>Реквизиты документа подтверждающие полномочия на подписание договора лизинга</b></p>

							<div className="form_field">
								<label>Право подписи на основании <sup className="required_label">*</sup></label>
								<Select 
									id="signatory_person.signer_rule_basis" 
									name="signatory_person.signer_rule_basis" 
									options={ doctypes_corporate } 
									placeholder="Вид документа" 
									noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
									isSearchable={ true } 
									className="autocomlete" 
									classNamePrefix="react-select" 
									value={ doctypes_corporate.filter((type) => signatory_person.signer_rule_basis === type.value) } 
									onChange={ (element) => this._handle_onTextFieldChange(`signatory_person.signer_rule_basis`, element.value) } 
									required={ true } 
									isDisabled={ checking } 
								/>
							</div>

							{ signatory_person.signer_rule_basis === 100000003 && (
								<div className="form_field">
									<label>Наименование документа <sup className="required_label">*</sup></label>
									<input type="text" 
										id="signatory_person.signer_rule_basis_add" 
										name="signatory_person.signer_rule_basis_add" 
										value={ this._checkStrValue(signatory_person.signer_rule_basis_add) } 
										placeholder="Наименование документа" 
										onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
										required={ true } 
										disabled={ checking } 
									/>
								</div>
							) }

							{ (signatory_person.signer_rule_basis === 100000000 || signatory_person.signer_rule_basis === 100000003) && (
								<>
									<div className="formgroup">
										<div className="form_field">
											<label>Номер документа <sup className="required_label">*</sup></label>
											<input type="text" 
												id="signatory_person.docnumber" 
												name="signatory_person.docnumber" 
												value={ this._checkStrValue(signatory_person.docnumber) } 
												placeholder="Номер документа" 
												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>
											<CalendarDatePicker 
												style={{ width: "calc(100% - 198px)" }} 
												placeholder="ДД.ММ.ГГГГ" 
												id={ "signatory_person.docdate" } 
												value={ this._checkStrValue(signatory_person.docdate) !== "" ? this._checkStrValue(signatory_person.docdate) : null } 
												onChange={ (date) => this._handle_onTextFieldChange("signatory_person.docdate", date) } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									<FilesList 
										//group="signatory_person" 
										title="Прикрепить скан документа на право подписи" 
										name="signatory_corporate_files" 
										files={ signatory_corporate_files } 
										onAddFile={ this._handle_onAddFile } 
										onRemoveFile={ this._handle_onRemoveFile } 
										checking={ checking } 
									/>
								</>
							) }

							{/*}
							<div className="dosc_list medium-icon">
								<div className="row">
								<p className="doc_name i-pdf extension">№ 01/20/2020 (.PDF)<span style={{width: "100%"}}>Постановление</span></p>
								</div>
							</div>
							{*/}
						</React.Fragment>
					) }

					{/*}
					<div className="form_field">
						<div className="form_field checkbox">
							<input type="checkbox" 
								hidden="" 
								id="personal_data_consent" 
								name="personal_data_consent" 
								checked={ personal_data_consent } 
								onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !personal_data_consent ? true : false) } 
								disabled={ checking } 
							/>
							<label htmlFor="personal_data_consent" className="unselectable">Даю согласие на&nbsp;<a style={{ cursor: "pointer", }} onClick={ () => { this.setState({ modal_show_personal_data: true, }) } }>обработку персональных данных</a></label>
						</div>
					</div>
					{*/}
					{ !checking && (
						<div className="action">
							<button type="button" 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>
					) }
				</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_3_Signer);