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

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

class Form_6_NonProfit extends QuestionnaireForm 
{
	constructor(props)
	{
		super(props);
		this.state = {
			non_profit: {
				fin_source_business: false, 
				fin_source_donate: false, 
				fin_source_fees: false, 
				fin_source_another: false, 
				fin_source_another_description: null, 
				foreign_payers: false, 
				fin_goals_cars: null, 
				fin_goals_trucks: null, 
				fin_goals_special: null, 
			}, 
			loading: false, 
			status: "empty", 
			errors: [], 
		};

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

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

	componentDidMount()
	{
	}

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


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

	_handle_onAnother = () => 
	{
		const { non_profit } = this.state;

		this._handle_onFieldChange("non_profit", { ...this.state.non_profit, ...{ 
			fin_source_another: !non_profit.fin_source_another ? true : false, 
			fin_source_another_description: non_profit.fin_source_another ? "" : non_profit.fin_source_another_description, 
		} });
	}

	_checkDisabled = () => 
	{
		const { non_profit } = this.state;
		const check = ["fin_goals_cars", "fin_goals_trucks", "fin_goals_special"];
		let need = true;

		for(let i in check)
		{
			if(non_profit[check[i]] !== null && non_profit[check[i]] !== "")
			{
				need = false;
			}
		}

		if(need)
		{
			return true;
		}

		if(non_profit.fin_source_another)
		{
			if(non_profit.fin_source_another_description === "")
			{
				return true;
			}
		}

		if(!non_profit.fin_source_business && !non_profit.fin_source_donate && !non_profit.fin_source_fees && !non_profit.fin_source_another)
		{
			return true;
		}

		return false;
	}

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

		event.preventDefault();

		const { non_profit } = this.state;

		const errors = [];
		const fin_source = ["fin_source_business", "fin_source_donate", "fin_source_fees"];
		let check_another_fin_source = true;

		for(let i in fin_source)
		{
			if(non_profit[fin_source[i]] !== false)
			{
				check_another_fin_source = false;
			}
		}

		if(check_another_fin_source)
		{
			if(!non_profit.fin_source_another)
			{
				errors.push("non_profit.fin_source");
			}
			else
			{
				if(!this._checkStrNotEmpty(non_profit.fin_source_another_description))
				{
					errors.push("non_profit.fin_source_another_description");
				}
			}
		}

		const fin_goals = ["fin_goals_cars", "fin_goals_trucks", "fin_goals_special"];
		let fin_goals_need = true;

		for(let i in fin_goals)
		{
			if(this._checkStrNotEmpty(non_profit[fin_goals[i]]))
			{
				fin_goals_need = false;
			}
		}

		if(fin_goals_need)
		{
			errors.push("non_profit.fin_goals");
		}

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

	_checkRequired = (field) => 
	{
		const { non_profit } = this.state;
		const check = ["fin_goals_cars", "fin_goals_trucks", "fin_goals_special"];

		let need = true;

		for(let i in check)
		{
			if(non_profit[check[i]] !== null && non_profit[check[i]] !== "")
			{
				need = false;
			}
		}

		return need;
	}

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

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


		return (
			<React.Fragment>
				<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }} className={`questionnaire questionnaire_6 ${ checking && "disabled" }`}>
					<p className="title">6. Данные о некомерческой организации</p>
					{ errors.indexOf("non_profit.fin_source") > -1 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Необходимо указать источник происхождения денежных средств."/>
					) }
					<p>Источники происхождения денежных средств, из которых будут осуществляться лизинговые платежи:</p>

					<div className="form_field">
						<div style={{ width: "100%" }}>
							<div className="form_field checkbox">
								<input type="checkbox" hidden="" 
									id="non_profit.fin_source_business" 
									name="non_profit.fin_source_business" 
									checked={ non_profit.fin_source_business } 
									onChange={ (event) => { this._removeError("non_profit.fin_source"); this._handle_onCheckboxFieldChange(event.target.name, !non_profit.fin_source_business ? true : false); } } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.fin_source_business" className="unselectable">От приносящей доход деятельности</label>
							</div>
							<div className="form_field checkbox">
								<input type="checkbox" hidden="" 
									id="non_profit.fin_source_donate" 
									name="non_profit.fin_source_donate" 
									checked={ non_profit.fin_source_donate } 
									onChange={ (event) => { this._removeError("non_profit.fin_source"); this._handle_onCheckboxFieldChange(event.target.name, !non_profit.fin_source_donate ? true : false); } } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.fin_source_donate" className="unselectable">Добровольные пожертвования</label>
							</div>

							<div className="form_field checkbox">
								<input type="checkbox" hidden="" 
									id="non_profit.fin_source_fees" 
									name="non_profit.fin_source_fees" 
									checked={ non_profit.fin_source_fees } 
									onChange={ (event) => { this._removeError("non_profit.fin_source"); this._handle_onCheckboxFieldChange(event.target.name, !non_profit.fin_source_fees ? true : false ); } } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.fin_source_fees" className="unselectable">Вступительные членские взносы</label>
							</div>

							<div className="form_field checkbox">
								<input type="checkbox" hidden="" 
									id="non_profit.fin_source_another" 
									name="non_profit.fin_source_another" 
									checked={ non_profit.fin_source_another } 
									onChange={ (event) => { this._removeError([ "non_profit.fin_source", "non_profit.fin_source_another_description" ]); this._handle_onAnother(); } } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.fin_source_another" style={{ width: "100%" }} className="unselectable">
									<span>Иное { non_profit.fin_source_another && (<sup className="required_label">*</sup>) }</span>
									<input type="text" 
										className={ errors.indexOf("non_profit.fin_source_another_description") > -1 ? "error" : "" } 
										id="non_profit.fin_source_another_description" 
										name="non_profit.fin_source_another_description" 
										value={ this._checkStrValue(non_profit.fin_source_another_description) } 
										disabled={ checking ? true : non_profit.fin_source_another ? false : true } 
										placeholder="Укажите источник" 
										required={ non_profit.fin_source_another ? true : false } 
										onChange={ (event) => { this._removeError([ "non_profit.fin_source", "non_profit.fin_source_another_description" ]); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
									/>
								</label>
							</div>
						</div> 
					</div>

					<p>Организация является получателем денежных средств  и имущества от иностранных государств, международных  и иностранных организаций, иностранных граждан и лиц без гражданства:</p>

					<div className="form_field">
						<div style={{ width: "100%" }}>
							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="0" 
									id="non_profit.foreign_payers_0" 
									name="non_profit.foreign_payers" 
									checked={ non_profit.foreign_payers === false ? true : false } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, false) } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.foreign_payers_0" className="unselectable">Нет</label>
							</div>
							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="1" 
									id="non_profit.foreign_payers_1" 
									name="non_profit.foreign_payers" 
									checked={ non_profit.foreign_payers === false ? false : true } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, true) } 
									disabled={ checking } 
								/>
								<label htmlFor="non_profit.foreign_payers_1" className="unselectable">Да</label>
							</div>
						</div> 
					</div>

					{ errors.indexOf("non_profit.fin_goals") > -1 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Необходимо указать цели использования предмета лизинга для любой из категорий."/>
					) }
					<p>Укажите цели использования предмета лизинга и подтвердите их соответствие уставным целям для каждого предмета лизинга отдельно</p>

					<div className="form_field">
						<label className="unselectable">Легковые автомобили</label>
						<input type="text" 
							id="non_profit.fin_goals_cars" 
							name="non_profit.fin_goals_cars" 
							value={ this._checkStrValue(non_profit.fin_goals_cars) } 
							placeholder="Введите данные" 
							onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) } 
							required={ false } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field">
						<label className="unselectable">Легкий коммерческий транспорт</label>
						<input type="text" 
							id="non_profit.fin_goals_trucks" 
							name="non_profit.fin_goals_trucks" 
							value={ this._checkStrValue(non_profit.fin_goals_trucks) } 
							placeholder="Введите данные" 
							onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) } 
							required={ false } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field">
						<label className="unselectable">Грузовые автомобили/ спецтехника</label>
						<input type="text" 
							id="non_profit.fin_goals_special" 
							name="non_profit.fin_goals_special" 
							value={ this._checkStrValue(non_profit.fin_goals_special) } 
							placeholder="Введите данные" 
							onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) } 
							required={ false } 
							disabled={ checking } 
						/>
					</div>

					{ !checking && (
						<div className="action">
							<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>
					) }
				</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_6_NonProfit);