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 numeral from "numeral";
import moment from "moment";
import { SpinnerCircular } from 'spinners-react';

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 { downloadInvoiceFile, getContract, getContractDebtInvoiceFile, getContractInfo, getContractInvoices, getContractPenaltyInvoiceFile, signGetGUIDEntity, signGetWMDoc } from './../../actions';
import AccountLayout from "../components/Layout/Account";
import ContractHeader from "./components/ContractHeader";

class Invoice extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {
			loading: false, 
		}
	}

	_handle_downloadFile = () => 
	{
		const { group, contract_number } = this.props;

		this.setState({ loading: true }, async () => 
		{
			switch(group.type)
			{
				case "kaskoProlong":
				{
				}
				break;

				case "fingapProlong":
				{
					
				}
				break;

				default:
				{
					const guid_result = await signGetGUIDEntity({ contract_number });
					console.log({ guid_result, code: group.code });
					await downloadInvoiceFile({ payload: { entity_id: guid_result.entityid, code: group.code }, filename: `ЛК Эволюция - договор ${ contract_number } - ${ group.title }.pdf` });
				}
				break;
			}

			this.setState({ loading: false });
		});
	}

	render()
	{
		const { group, invoices } = this.props;
		const { loading } = this.state;

		console.log({ invoices }, group.type)

		if(invoices[group.type])
		{
			return (
				<div className="invoice">
					<p>{ group.title }</p>
					<div className="actions">
						<div className="icon">
							<span className="extension">PDF</span>
						</div>
						<div className="download">
							{ loading ? (
								<SpinnerCircular style={{ margin: "8px 30px 0px", }} size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)"/>
							) : (
								<button className="button blue" onClick={ this._handle_downloadFile }>Скачать</button>
							) }
						</div>
					</div>
				</div>
			)
		}

		return null;
	}
}

class ContractSchedulePage extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			loading: false, 
			contracts_info: {}, 
			payments: null, 
			avans: null, 
			debt: null, 
			penalty: null, 
			invoices: {}, 
			full: false, 
			opened: [], 
			debt_invoice_file_loading: false, 
			penalty_invoice_file_loading: false, 
		}
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			contracts_info: nextProps.contracts_info, 
			payments: nextProps.payments, 
			avans: nextProps.avans, 
			debt: nextProps.debt, 
			penalty: nextProps.penalty, 
			invoices: nextProps.invoices, 
		};
	}

	componentDidMount()
	{
		//console.log("ContractSchedulePage", "this.state", this.state);

		const { dispatch, number } = this.props;

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

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

				getContractInvoices({ dispatch, number, })
				.then(() => 
				{
				})
				.catch(() => {});
			});
		}
	}

	_getLastPayDate = () => 
	{
		let last = null;
		const { payments } = this.state;

		for(let i in payments)
		{
			if(payments[i].status === "Paid")
			{
				last = moment(payments[i].date, "DD-MM-YYYY");
			}
		}

		return last;
	}

	_handle_onSetFull = () => 
	{
		this.setState({ full: true });
	}

	_handle_onSetOpen = (number) => 
	{
		const opened = [ ...this.state.opened ];

		if(opened.indexOf(number) < 0)
		{ opened.push(number); }
		else
		{ opened.splice(opened.indexOf(number), 1); }

		this.setState({ opened: opened });
	}

	_handle_onDownloadDebtFile = () => 
	{
		const { number } = this.props;

		if(!this.state.debt_invoice_file_loading)
		{
			this.setState({ debt_invoice_file_loading: true }, () => 
			{
				getContractDebtInvoiceFile({ contract: number })
				.then(() => 
				{
					this.setState({ debt_invoice_file_loading: false });
				})
				.catch(() => 
				{
					this.setState({ debt_invoice_file_loading: false });					
				});
			});
		}
	}

	_handle_onDownloadPenaltyFile = () => 
	{
		const { number } = this.props;

		if(!this.state.penalty_invoice_file_loading)
		{
			this.setState({ penalty_invoice_file_loading: true }, () => 
			{
				getContractPenaltyInvoiceFile({ contract: number })
				.then(() => 
				{
					this.setState({ penalty_invoice_file_loading: false });
				})
				.catch(() => 
				{
					this.setState({ penalty_invoice_file_loading: false });
				});
			});
		}
	}

	_handle_onCalculatePenalty = () => 
	{
		const { number } = this.props;
		this.props.router.push(`/contract/${ number }/documents#penalties`);
	}

	render()
	{
		const { number } = this.props;
		const { loading, contracts_info, payments, avans, debt, penalty, full, opened, debt_invoice_file_loading, penalty_invoice_file_loading, invoices, } = this.state;

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

		//console.log("RENDER", "payments");

		//console.log(payments);


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

		const invoice_types = [
			{ type: "firstPayment", title: "Счет на аванс", code: "Invoice_Payment", }, 
			{ type: "nextPayment", title: "Счет на очередной платеж", code: "InvoicePlanPayment_attach", }, 
			{ type: "osagoInvoice", title: "Счет ОСАГО", code: "OSAGO_Pay_contract", }, 
			{ type: "kaskoInvoice", title: "Счет КАСКО", code: "KASKO_Pay_contract", }, 
			{ type: "kaskoProlong", title: "Счет на пролонгацию КАСКО", }, 
			{ type: "fingapInvoice", title: "Счет EvoSafeFinance", code: "Fingap_Pay_contract", }, 
			{ type: "fingapProlong", title: "Счет на пролонгацию EvoSafeFinance", }, 
		];

		const statuses = {
			"NotPaid": "", 
			"HalfPaid": "overpayment-1", 
			"OverPaid": "overpayment-2", 
			"Paid": "paid",
		};
		let today = moment();
		let last_pay_date = this._getLastPayDate();

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta
						name="description"
						content="ЛК Эволюция автолизинга"
					/>
				</Head>
				<Header { ...this.props }/>
				<AccountLayout>
					<div className="title_wrapper">
						<div className="left" style={{ flexDirection: 'column', }}>
							<ContractHeader number={ number } date={ date } car={ car }/>
						</div>
						<Company { ...this.props }/>
					</div>
					<div className="aside_container about">
						<InnerMenu number={ number } status={ status } { ...this.props }/>
						<article>
							{ parseInt(avans, 10) > 0 && (
								<div className="payments_actions"> 
									<div className="avans">
										<p>Сумма авансовых поступлений по договору: <span style={{ whiteSpace: "nowrap" }}>{ numeral(avans).format(' ., ') }&nbsp;₽</span></p>
									</div>
								</div>
							) }
							{ invoices[number] !== undefined && (
								<div><p className="invoices_title">Подготовленные счета</p></div>
							) }
							<div className="payments_actions">
								{ parseInt(debt, 10) > 0 && (
									<div>
										<p>Счёт на основной долг: { numeral(debt).format(' ., ') }&nbsp;₽</p>
										<button className="button button-blue" onClick={ this._handle_onDownloadDebtFile } style={{ minWidth: 113 }}>
											{ debt_invoice_file_loading ? (
												<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
											) : 
												("Скачать счет") 
											}
										</button>
									</div>
								) }
								{ parseInt(penalty, 10) > 0 && (
									<div>
										<p><span>Пени:</span> { numeral(penalty).format(' ., ') }&nbsp;₽</p>
										<button className="button button-blue" onClick={ this._handle_onDownloadPenaltyFile } style={{ minWidth: 113 }}>
											{ penalty_invoice_file_loading ? (
												<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
											) : 
												("Скачать счет") 
											}
										</button>
										<button className="button button-blue" onClick={ this._handle_onCalculatePenalty }>Рассчитать пени</button>
									</div>
								) }
							</div>
							<div className="contract_invoices_list">
								{ invoices[number] !== undefined && invoice_types.map((group, index) => (
									<Invoice group={ group } contract_number={ number } invoices={ invoices[number] } key={ index }/>
								)) }
							</div>
							<div><p className="schedule_title">График платежей</p></div>
							<div className="contract_table schedule">
								<div className="table_row table_header">
									<div className="table_cell">№ платежа</div>
									<div className="table_cell">Дата лизингового платежа</div>
									<div className="table_cell">Лизинговый платеж с НДС ₽</div>
									<div className="table_cell">НДС, 20% ₽</div>
									<div className="table_cell">Статус платежа</div>
									<div className="table_cell">Платежное поручение</div>
								</div>
								{ loading ? (
									<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
										<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
									</div>
								) : (
									<>
										{ !full && (
											<button className="show_more primary" onClick={ this._handle_onSetFull }>Показать прошедшие платежи</button>
										) }
										{ payments !== undefined && payments !== null && Object.values(payments).map((payment, index) => 
										{
											let pd = moment(payment.date, "DD-MM-YYYY");
											if(!full && pd < last_pay_date) { return null; }

											return (
												<div className={ `table_row ${ opened.indexOf(payment.number) > -1 ? "opened" : "" }` } data-status={ payment.status === "NotPaid" && pd < today ? "notpaid" : statuses[payment.status] } key={ index } onClick={ () => this._handle_onSetOpen(payment.number) }>
													<div className="table_cell" data-title="Платеж №">{ payment.number }</div>
													<div className="table_cell" data-title="от">{ moment(payment.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</div>
													<div className="table_cell" data-title="На сумму" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</div>
													<div className="table_cell" data-title="НДС, 20%" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.vat_amount).format(' ., ') }&nbsp;₽</div>
													<div className="table_cell contract_payments_status_cell">
														{ payment.status === "Paid" && "Оплачено" }
														{ payment.status === "NotPaid" && "Не оплачено" }
														{ payment.status === "HalfPaid" && (
															<><span>Недоплата</span><br/><span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount - payment.paid_amount).format(' ., ') }&nbsp;₽</span></>
														) }
														{ payment.status === "OverPaid" && (
															<><span>Переплата</span> <span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</span></>
														) }
													</div>
													<div className="table_cell contract_payments_invoices_cell">
														{ payment.invoices !== undefined && payment.invoices.map((invoice, invoice_index) => 
														(
															<React.Fragment key={invoice_index}>
															<p style={{ paddingBottom: "15px", lineHeight: "18px" }}>№{ invoice.number } от { moment(invoice.date, "DD-MM-YYYY").format("DD.MM.YYYY") } на сумму: <span style={{ whiteSpace: "nowrap" }}>{ numeral(invoice.total_amount).format(' ., ') }&nbsp;₽</span></p>
															</React.Fragment>
														)) }
													</div>
													<button className="toggle_cell" ></button>
												</div>
											)
										}) }
										{/*}
										<div className="table_row" data-status="overpayment-2">
											<div className="table_cell" data-title="Платеж №">11</div>
											<div className="table_cell" data-title="от">21.02.2021</div>
											<div className="table_cell" data-title="На сумму">239 724,05</div>
											<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
											<div className="table_cell"><span>Переплата</span> <span>15 000,00 ₽</span></div>
											<div className="table_cell">№18432 от 20/01/2021 на сумму 255 000,00 ₽</div>

											<button className="toggle_cell"></button>
										</div>
										<div className="table_row opened" data-status="overpayment-1">
											<div className="table_cell" data-title="Платеж №">12</div>
											<div className="table_cell" data-title="от">21.02.2021</div>
											<div className="table_cell" data-title="На сумму">239 724,05</div>
											<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
											<div className="table_cell">Переплата 10 000,00 ₽</div>
											<div className="table_cell">№34223 от 21/02/2021 на сумму 229 724,05 ₽</div>

											<button className="toggle_cell"></button>
										</div>
										<div className="table_row" data-status="paid">
											<div className="table_cell" data-title="Платеж №">13</div>
											<div className="table_cell" data-title="от">21.02.2021</div>
											<div className="table_cell" data-title="На сумму">239 724,05</div>
											<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
											<div className="table_cell">Оплачено </div>
											<div className="table_cell">№44911 от 10/03/2021 на сумму 100 000,00 ₽
											№49877 от 21/03/2021 на сумму 139 724,05 ₽</div>

											<button className="toggle_cell"></button>
										</div>
										<div className="table_row">
											<div className="table_cell" data-title="Платеж №">14</div>
											<div className="table_cell" data-title="от">21.02.2021</div>
											<div className="table_cell" data-title="На сумму">239 724,05</div>
											<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
											<div className="table_cell">Не оплачено </div>
											<div className="table_cell">-</div>

											<button className="toggle_cell"></button>
										</div>
										{*/}
									</>
								) }
							</div>
						</article>
					</div>
				</AccountLayout>
				<Footer/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		contracts_info: state.contracts_info, 
		payments: state.contract.payments, 
		avans: state.contract.avans, 
		debt: state.contract.debt, 
		penalty: state.contract.penalty, 
		invoices: state.invoices.list, 
		//schedule: state.payments, 
	}
}

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

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