import React from "react";
import Head from "next/head";
import Image from "next/image";
import { connect } from "react-redux";
import { withRouter } from "next/router";
import moment from "moment";
import { SpinnerCircular } from "spinners-react";
import Link from "next/link";
import { reduxWrapper } from "../../../store";

import Header from "../../components/Header";
import Footer from "../../components/Footer";
import Company from "../../components/Company";

import InnerMenu from "./../components/InnerMenu";

import SignatoriesList from "./components/SignatoriesList";
import CalculationsList from "./components/CalculationsList";

import VariantsList from "./components/VariantsList";
import FinalMessage from "./components/FinalMessage";

import {
	getContractInfo, 
	getContractGraphicChange, 
	getContractGraphicChangeVariants, 
	getContractGraphicChangeGetCurrent, 
	getContractGraphicChangeGetCalculated, 
	getContractGraphicChangeSignatories, 
	getContractGraphicChangeCalculationsList,
	signContractGraphicChange,
	getContractCalculationPDFFile,
	signCheckCreatePrintForm, 
} from "../../../actions";
import Options from "./components/Options";
import Comparison from "./components/Comparison";
import AccountLayout from "../../components/Layout/Account";
import ContractHeader from "../components/ContractHeader";

class ChangeGraphicPage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			loading: false, 
			loading_pdf: false, 
			contracts_info: {}, 
			mode_options: false, 
			mode_comparison: false, 
			mode_calculation: false, 
			mode_final: false, 
			calculation_id: undefined, 
			signer: undefined, 
			signatories: null, 
			calculations: null, 
			variants: null, 
			variants_selected: [], 
			variants_unavailable: [], 
			variants_loading: false, 
			variants_types: [
				{ title: "Изменение даты платежей", type: "change_payment_date", help: "Это подсказка по Изменить дату платежа" }, 
				{ title: "Включение КАСКО в график", type: "insurance_change", help: "Это подсказка по Изменение параметров страхования" }, 
				//{ title: "Изменение выкупного платежа", type: "last_payment_change", help: "Это подсказка по Изменение формулировки выкупной платеж" }, 
				{ title: "Лизинговые каникулы", type: "date_offset_change", help: "Это подсказка по Лизинговые каникулы" }, 
				{ title: "Увеличение срока договора лизинга", type: "contract_term_change", help: "Это подсказка по Изменение кол-ва платежей" }, 
				{ title: "Изменение суммы платежей", type: "sum_pay_change", help: "Это подсказка по Изменение суммы платежей" }, 
				{ title: "Досрочный выкуп", type: "early_redemption_change", help: "Это подсказка по Досрочный выкуп" }, 
				//{ title: "Изменение Лизингополучателя", type: "", help: "Это подсказка по Изменение Лизингополучателя" }, 
			], 
			options: null, 
			current: null, 
			calculated: null, 
			comment: null, 
			editable: false, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		//console.log("getDerivedStateFromProps", nextProps);

		return {
			contracts_info: nextProps.contracts_info, 
			signatories: nextProps.signatories, 
			calculations: nextProps.calculations, 
			variants: nextProps.variants, 
			options: nextProps.options, 
			current: nextProps.current, 
			calculated: nextProps.calculated, 
		};
	}

	componentDidMount() 
	{
		const { dispatch, number } = this.props;

		if(document.location.hash !== undefined && document.location.hash !== null && document.location.hash !== "")
		{
			if (!this.state.loading && number !== undefined) 
			{
				this.setState({ loading: true }, () => 
				{
					if(this.state.contracts_info[ number ] === undefined)
					{
						getContractInfo({ dispatch, number });
					}

					Promise.all([
						getContractGraphicChangeCalculationsList({ dispatch, number }), 
						getContractGraphicChangeSignatories({ dispatch, number }), 
						getContractGraphicChangeGetCurrent({ dispatch, number }), 
						getContractGraphicChangeGetCalculated({ dispatch, calculation: document.location.hash.replace("#", "") }), 
					])
					.then(() => 
					{
						this.setState({ loading: false, mode_calculation: true });
					});
				});
			}
		}
		else
		{
			if (!this.state.loading && number !== undefined) 
			{
				this.setState({ loading: true }, () => 
				{
					if(this.state.contracts_info[ number ] === undefined)
					{
						getContractInfo({ dispatch, number });
					}

					getContractGraphicChange({ dispatch, number, })
					.then(() => 
					{
						this.setState({ loading: false });
					})
					.catch(() => {});
				});
			}
		}
	}

	componentWillUnmount() {}

	componentDidUpdate(prevProps, prevState)
	{
		if(document.location.hash)
		{
		}
	}

	_handle_onVariants = () => 
	{
		this.setState({ mode_options: false, mode_comparison: false });
	}

	_handle_onVariantSelect = (type) => 
	{
		const selected = [ ...this.state.variants_selected ];

		if(selected.indexOf(type) > -1)
		{
			selected.splice(selected.indexOf(type), 1)
		}
		else
		{
			selected.push(type);
		}

		this.setState({ variants_selected: selected, variants_loading: true }, () => 
		{
			const { variants_selected, variants_types } = this.state;
			const variants = {};

			for(let i in variants_types)
			{
				if(variants_selected.indexOf(variants_types[i].type) > -1)
				{
					variants[ variants_types[i].type ] = true;
				}
				else
				{
					variants[ variants_types[i].type ] = false;
				}
			}

			getContractGraphicChangeVariants({ dispatch: this.props.dispatch, number: this.props.number, variants })
			.then(() => 
			{
				this.setState({ variants_loading: false });
			});
		});
	}

	_handle_onBack = () => 
	{
		this.setState({ mode_options: false, mode_comparison: false });
	}

	_handle_onOptions = () => 
	{
		window.scrollTo(0, 0);
		this.setState({ mode_options: true, mode_comparison: false });
	}

	_handle_onSigner = (signer_id) => 
	{
		this.setState({ signer: signer_id });
	}

	_handle_onSign = (type) => 
	{
		const { calculation_id, signer, } = this.state;
		const { number, } = this.props;

		this.setState({ loading: true }, () => 
		{
			signContractGraphicChange({
				contract_number: number, 
				addcontract_number: calculation_id, 
				signatoryid: signer, 
				type
			})
			.then(async (comment) => 
			{
				this.setState({ loading: false, mode_final: true, mode_options: false, mode_comparison: false, comment });
			})
			.catch(() => 
			{	
				this.setState({ loading: false, }, () => 
				{
					alert("К сожалению, при расчёте возникла ошибка.\n\nДля расчёта вариантов изменения графика обратитесь, пожалуйста, в Службу клиентского сервиса по адресу электронной почты client@evoleasing.ru или по телефону Горячей линии 8 800 333 75 75.");
				});
			});	
		});
	}

	_handle_onSignEDOFinished = (comment) => 
	{
		this.setState({ loading: false, mode_final: true, mode_options: false, mode_comparison: false, comment });
	}

	_handle_onDownloadPDF = () => 
	{
		const { calculation_id, } = this.state;

		this.setState({ loading_pdf: true, }, () => 
		{
			getContractCalculationPDFFile({ calculation: calculation_id, })
			.then(() => 
			{
				this.setState({ loading_pdf: false, });
			})
			.catch(() => 
			{
				this.setState({ loading_pdf: false, }, () => 
				{
					alert("К сожалению, при создании файла PDF расчёта возникла ошибка.\n\nПожалуйста, попробуйте позднее или воспользуйтесь графиком ниже.");
				});
			});	
		});
	}

	_handle_onCalculate = (calculation_id) => 
	{
		const { dispatch, number } = this.props;

		getContractGraphicChangeCalculationsList({ dispatch, number })
		.then(() => 
		{
			setTimeout(() => 
			{
				this._handle_onCalculation(calculation_id, true);
			}, 100);
		})
		.catch(() => 
		{
		});	
	}

	_handle_onCalculation = (calculation_id, editable = false) => 
	{
		this.setState({ editable: editable, loading: true, mode_options: false, calculation_id: calculation_id }, () => 
		{
			const { dispatch, number } = this.props;

			Promise.all([
				getContractGraphicChangeGetCurrent({ dispatch, number }), 
				getContractGraphicChangeGetCalculated({ dispatch, calculation: calculation_id }), 
			])
			.then(() => 
			{
				this.setState({ loading: false, mode_comparison: true, });
			});
		});
	}

	render() 
	{
		const { number } = this.props;
		const { loading, loading_pdf, contracts_info, mode_options, mode_comparison, mode_calculation, mode_final, signer, signatories, calculations, calculation_id, editable, variants, variants_loading, variants_selected, variants_types, variants_unavailable, options, current, calculated, comment } = this.state;

		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};

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

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга" />
				</Head>
				<Header { ...this.props } />
				<AccountLayout { ...this.props }>
					<div className="title_wrapper">
						<div className="left" style={{ flexDirection: "column" }}>
							<ContractHeader number={ number } date={ date } car={ car }/>
						</div>
						<Company { ...this.props }/>
					</div>
					{ loading ? (
						<div className="aside_container about">
							<InnerMenu number={ number } status={ status } { ...this.props } />
							<article className="changes">
								<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
									<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
								</div>
							</article>
						</div>
					) : (
						<>
							{ mode_comparison || mode_calculation || mode_final ? (
								<>
									{ mode_final ? (
										<div className="aside_container about">
											<FinalMessage number={ number } comment={ comment }/>
										</div>
									) : (
										<div className="aside_container about">
											<Comparison 
												number={ number } 
												loading_pdf={ loading_pdf } 
												signer={ signer } 
												signatories={ signatories } 
												calculations={ calculations } 
												calculation_id={ calculation_id } 
												editable={ editable } 
												current={ current } 
												calculated={ calculated } 
												onBack={ this._handle_onBack } 
												onOptions={ this._handle_onOptions } 
												onSigner={ this._handle_onSigner } 
												onSign={ this._handle_onSign } 
												onDownloadPDF={ this._handle_onDownloadPDF } 
												onSignEDOFinished={ this._handle_onSignEDOFinished } 
											/>
										</div>
									) }
								</>
							) : (
								<div className="aside_container about">
									<InnerMenu number={ number } status={ status } { ...this.props } />
									<article className="changes">
										{ mode_options ? (
											<Options 
												dispatch={ this.props.dispatch } 
												number={ number } 
												variants={ variants } 
												variants_selected={ variants_selected } 
												options={ options } 
												onVariants={ this._handle_onVariants } 
												onCalculate={ this._handle_onCalculate } 
											/>
										) : (
											<>
												{ variants !== null && (
													<>
														{ variants.enable_addcontract === false ? (
															<div className="block alert">
																<p>{ variants.comment !== null ? variants.comment : "Внимание! Существует активное неподписанное дополнительное соглашение. Расчёт новых изменений невозможен." }</p>
																{ variants.comment === null && (<Link href={`/contract/${ number }/agreement`}><a>Подробнее</a></Link>) }
															</div>
														) : (
															<></>
														) }
														{ calculations !== undefined && calculations !== null && calculations.length > 0 && (
															<div className="block">
																<p className="title">Предварительные расчеты</p>
																<CalculationsList number={ number } calculations={ calculations } onCalculation={ this._handle_onCalculation }/>
															</div>
														) }
														<div className="block">
															<p className="title">
																Подписанты
																<Link href="/support/request#0b6b0460b862ea69764f3e9d5dca187e"><a>Добавить подписанта</a></Link>
															</p>
															<SignatoriesList signatories={ signatories }/>
														</div>
														<VariantsList 
															onOptions={ this._handle_onOptions } 
															onVariant={ this._handle_onVariantSelect } 
															variants={ variants } 
															variants_types={ variants_types } 
															selected={ variants_selected } 
															loading={ variants_loading } 
															blocked={ variants.enable_addcontract === false ? true : false } 
														/>
														{/*}
														{ variants.enable_addcontract !== false && (
														) }
														{*/}
													</>
												) }
											</>
										) }
									</article>
								</div>
							) }
						</>
					) }
				</AccountLayout>
				<Footer/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contracts_info: state.contracts_info, 
		signatories: state.contract.change.signatories, 
		calculations: state.contract.change.calculations, 
		variants: state.contract.change.variants, 
		options: state.contract.change.options, 
		current: state.contract.change.current, 
		calculated: state.contract.change.calculated, 
	};
}

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

export default withRouter(connect(mapStateToProps)(ChangeGraphicPage));