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 citizenships from "../../../../lib/citizenships.json";
import { reduxWrapper } from '../../../../store';
import AddressSuggests from "../../AddressSuggests";

class ShareholderForm extends React.Component
{
	_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
	_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
	_handle_onFieldChange = this.props._handle_onFieldChange;

	_handle_onCitizenshipChange = (name, value) => 
	{
		console.log("_handle_onCitizenshipChange", value);
		let citizenship = undefined;
		for(let i in citizenships)
		{
			if(parseInt(citizenships[i].value, 10) === parseInt(value, 10))
			{
				citizenship = citizenships[i].label;
			}
		}

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

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

		let citizenship = undefined;
		if(shareholder.identity_document.citizenship.code !== "")
		{
			for(let i in citizenships)
			{
				if(parseInt(citizenships[i].value, 10) === parseInt(shareholder.identity_document.citizenship.code, 10))
				{
					citizenship = citizenships[i];
				}
			}
		}

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

				<div className="form_field">
					<label>Имя</label>
					<input type="text" 
						id={ `founded_persons[${ index }].firstname` } 
						name={ `founded_persons[${ index }].firstname` } 
						value={ shareholder.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>
					<input type="text" 
						id={ `founded_persons[${ index }].middlename` } 
						name={ `founded_persons[${ index }].middlename` } 
						value={ shareholder.middlename } 
						placeholder="Введите отчество" 
						onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
						disabled={ checking } 
					/>
				</div>

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

				<div className="form_field">
					<label>Телефон</label>
					<input type="text" 
						id={ `founded_persons[${ index }].telephone` } 
						name={ `founded_persons[${ index }].telephone` } 
						value={ 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</label>
					<input type="text" 
						id={ `founded_persons[${ index }].email` } 
						name={ `founded_persons[${ index }].email` } 
						value={ 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 ">
					<div className="form_field">
						<label>Серия и номер паспорта</label>
						<div className="formgroup">
							<div className="form_field">
								<input type="text" 
									id={ `founded_persons[${ index }].identity_document.seria` } 
									name={ `founded_persons[${ index }].identity_document.seria` } 
									value={ 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">
								<input type="text" 
									id={ `founded_persons[${ index }].identity_document.docnumber` } 
									name={ `founded_persons[${ index }].identity_document.docnumber` } 
									value={ 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>Дата выдачи и код подразделения </label>
						<div className="formgroup">
							<div className="form_field">
								<CalendarDatePicker 
									//style={{ width: "calc(100% - 198px)" }} 
									placeholder="ДД.ММ.ГГГГ" 
									id={ `founded_persons[${ index }].identity_document.issuedate` } 
									value={ shareholder.identity_document.issuedate !== "" ? shareholder.identity_document.issuedate : null } 
									onChange={ (date) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.issuedate`, date) } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>
							<div className="form_field">
								<input type="text" 
									id={ `founded_persons[${ index }].identity_document.icode` } 
									name={ `founded_persons[${ index }].identity_document.icode` } 
									value={ shareholder.identity_document.icode } 
									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>Кем выдан</label>
					<input type="text" 
						id={ `founded_persons[${ index }].identity_document.issueby` } 
						name={ `founded_persons[${ index }].identity_document.issueby` } 
						value={ 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>Место рождения</label>
					<AddressSuggests 
						id={ `founded_persons[${ index }].identity_document.placebirth` } 
						value={ shareholder.identity_document.placebirth } 
						onChange={ (data) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.placebirth`, data.title) } 
						disabled={ checking } 
					/>
				</div>

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

				<div className="form_field">
					<label>Адрес регистрации</label>
					<AddressSuggests 
						id={ `founded_persons[${ index }].identity_document.registration_address` } 
						value={ shareholder.identity_document.registration_address.title } 
						fias={ shareholder.identity_document.registration_address.fias_id } 
						onChange={ (data) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.registration_address`, data) } 
						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;

	_checkSignatoryDisabled = (signatory_id) => 
	{
		const { shareholders } = this.props;
		for(let i in shareholders)
		{
			if(shareholders[i].signatory_id === signatory_id)
			{
				return true;
			}
		}

		return false;
	}

	render()
	{
		const { index, shareholders, removeShareholder, signatories, changeSignatorySelection, clearSignatorySelection, checking } = 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={ `founded_persons[${ index }].founder_from_list` } 
											name={ `founded_persons[${ index }].founder_from_list` } 
											onChange={ (event) => clearSignatorySelection(`founded_persons[${ index }]`, { founder_from_list: !shareholder.founder_from_list ? true : false, lastname: "", firstname: "", middlename: "", no_middle_name: false, }) } 
											/>
										<label className="unselectable" htmlFor={ `founded_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">

										{ signatories !== undefined && signatories !== null && signatories.map((signatory, s_index) => {
											const disabled = signatory.signatoryid !== shareholder.signatory_id ? this._checkSignatoryDisabled(signatory.signatoryid) : false;

											if(checking)
											{
												if(shareholder.signatory_id !== signatory.signatoryid)
												{
													return null;
												}
											}

											return (
												<div className="form_field checkbox" key={ s_index }>
													<input type="radio" hidden="" 
														id={ `founded_persons[${ index }].signatory_${ signatory.signatoryid }` } 
														name={ `founded_persons[${ index }].signatory_${ signatory.signatoryid }` } 
														checked={ signatory.signatoryid === shareholder.signatory_id } 
														onChange={ () => changeSignatorySelection(`founded_persons[${ index }]`, { ...shareholder, ...{ 
															founder_from_list: true, 
															signatory_id: signatory.signatoryid, 
															lastname: signatory.lastname, 
															firstname: signatory.firstname, 
															middlename: signatory.middlename, 
														} }) } 
														disabled={ disabled } 
													/>
													<label className="unselectable" style={ disabled ? { opacity: "0.5" } : {} } htmlFor={ `founded_persons[${ index }].signatory_${ signatory.signatoryid }` }>
														<div className="feed_item user">
															<img src="/assets/images/icons/avatar.svg" alt="" />
															<div>
																<p className="item_title">{ signatory.lastname } { signatory.firstname } { signatory.middlename }</p>
																<p className="item_desc">
																	<span>{ signatory.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>Доля в уставном капитале (%)</label>
						<input type="text" 
							id={ `founded_persons[${ index }].founder_part` } 
							name={ `founded_persons[${ index }].founder_part` } 
							value={ shareholder.founder_part } 
							placeholder="Укажите размер доли" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							required={ true } 
						/>
					</div>

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

			</React.Fragment>
		)
	}
}

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

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

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

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

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

		const founded_persons = [ ...this.state.founded_persons ];
		const founded_persons_template = JSON.parse(JSON.stringify(this.state.founded_persons_template));

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

		if(founded_persons.length < 4)
		{
			founded_persons.push(founded_persons_template);

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

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

		founded_persons.splice(index, 1);

		this._updateQuestionnaire({
			founded_persons, 
		});
	}

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

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

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

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

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

	_checkDisabled = () => 
	{
		const { founded_persons } = this.state;
		const check_all = [
			"founder_part", 
		];

		const check = [
			"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", 
		];

		for(let f in founded_persons)
		{
			for(let i in check_all)
			{
				if(_get(founded_persons[f], check_all[i]) === "")
				{
					console.log("1. EMPTY", f, check_all[i]);
					return true;
				}
			}

			if(!founded_persons[f].founder_from_list)
			{
				for(let i in check)
				{
					if(_get(founded_persons[f], check[i]) === "")
					{
						console.log("2. EMPTY", f, check[i]);
						return true;
					}
				}	
			}
			else
			{
				if(founded_persons[f].signatory_id === null)
				{
					console.log("3. EMPTY", f, "signatory_id");
					console.log("founded_persons[f]");
					console.log(founded_persons[f]);

					return true;
				}
			}
		}

		return false;
	}

	render()
	{
		const { signatories, checking } = this.props;
		const { founded_persons, loading, address, } = this.state;

		return (
			<form onSubmit={ this._handle_onFormSubmit } className={`questionnaire questionnaire_4 ${ checking && "disabled" }`}>
				<p className="title">4. Сведения об участниках (акционерах) и бенефициарных владельцах</p>
				<p>– физических лицах, владеющих долей в уставном капитале более 25%
					<small>*бенефициарный владелец (в соответствии с Федеральным законом от 07.08.2001 No115-ФЗ «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма») —
физическое лицо, которое в конечном счете прямо или косвенно (через третьих лиц) владеет (имеет преобладающее участие более 25 процентов в капитале) вышеуказанным лизингополучателем-юридическим лицом, либо
имеет возможность контролировать действия вышеуказанного лизингополучателя. Бенефициарным владельцем лизингополучателя-физического лица считается это лицо, за исключением случаев, если имеются основания
полагать, что бенефициарным владельцем является иное физическое лицо. В случае, если бенефициарным владельцем являются несколько человек, сведения предоставляются в отношении каждого.</small>
				</p>

				{ founded_persons.map((shareholder, index) => (
					<Shareholder 
						key={ index } 
						index={ index } 
						shareholders={ founded_persons } 
						address={ address } 
						_handle_onTextFieldChange={ this._handle_onTextFieldChange } 
						_handle_onCheckboxFieldChange={ this._handle_onCheckboxFieldChange } 
						_handle_onFieldChange={ this._handle_onFieldChange } 
						removeShareholder={ this._handle_onRemoveShareholder } 
						clearSignatorySelection={ this._handle_onClearSignatorySelection } 
						changeSignatorySelection={ this._handle_onChangeSignatorySelection } 
						signatories={ signatories } 
						checking={ checking } 
					/>
				)) }

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