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';

class Form_1_Main extends QuestionnaireForm 
{
	constructor(props)
	{
		super(props);
		this.state = {
			main: {
				title: "", 
				inn: "", 
				kpp: "", 
				email: "", 
				telephone: "", 
				websiteurl: "", 
				financial_loan: "", 
				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: "", 
				nko: false, 
				accept: false, 
			}, 
			loading: false, 
		};
	}

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

	componentDidMount()
	{
	}

	_checkDisabled = () => 
	{
		const { main } = this.state;
		const check = ["title", "inn", "kpp", "email", "telephone", "financial_loan"];

		for(let i in check)
		{
			if(main[check[i]] === "")
			{
				return true;
			}
		}

		return false;
	}

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

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

	_check_fields_disabled = (values) => 
	{
		for(let i in values)
		{
			if(values[i] === "")
			{
				return true;
			}
		}

		return false;
	}

	render()
	{
		const { checking } = this.props;
		const { loading, main } = this.state;

		return (
			<React.Fragment>
				<form onSubmit={ this._handle_onFormSubmit } className={`questionnaire questionnaire_1 ${ checking && "disabled" }`}>
					<p className="title">1. Информация о лизингополучателе</p>

					<div className="form_field">
						<label>Краткое наименование</label>
						<input type="text" 
							id="main.title" 
							name="main.title" 
							value={ main.title } 
							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>ИНН</label>
							<input type="text" 
								id="main.inn" 
								name="main.inn" 
								value={ main.inn } 
								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="main.kpp" 
								name="main.kpp" 
								value={ main.kpp } 
								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>Телефон</label>
							<input type="text" 
								id="main.telephone" 
								name="main.telephone" 
								value={ main.telephone } 
								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="main.websiteurl" 
								name="main.websiteurl" 
								value={ main.websiteurl } 
								placeholder="Введите адрес сайта, если есть" 
								onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
								disabled={ checking } 
							/>
						</div>
					</div>

					<div className="form_field">
						<label>E-mail</label>
						<input type="email" 
							id="main.email" 
							name="main.email" 
							value={ main.email } 
							placeholder="Укажите адрес электронной почты" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							disabled={ checking } 
						/>
						<p>может использоваться для отправки лизингодателем юридически значимых сообщений в соответсвии с условиями договора лизинга, а так же для операций в электронном ПТС/ПСМ</p>
					</div>

					<div className="form_field">
						<label>Финансовая нагрузка</label>
						<input type="text" 
							id="main.financial_loan" 
							name="main.financial_loan" 
							value={ main.financial_loan } 
							placeholder="Укажите сумму" 
							onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) } 
							disabled={ checking } 
						/>
						<p>сумма текущих ежемесячных платежей по действующим кредитам/договорам лизинга</p>
					</div>

					<div className="form_field">
						<label><b>Организация является НКО</b></label>
						<div>
							<div className="form_field checkbox">
								<input type="radio" 
									checked={ !main.nko } 
									hidden="" 
									id="main.nko_0" 
									name="main.nko" 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !main.nko ? true : false) } 
									disabled={ main.nko && checking } 
								/>
								<label htmlFor="main.nko_0" className="unselectable">Нет</label>
							</div>
							<div className="form_field checkbox">
								<input type="radio" 
									checked={ main.nko } 
									hidden="" 
									id="main.nko_1" 
									name="main.nko" 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !main.nko ? true : false) } 
									disabled={ !main.nko && checking } 
								/>
								<label htmlFor="main.nko_1" className="unselectable">Да</label>
							</div>
						</div>
					</div>

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