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 'moment/locale/ru';

import numeral from "numeral";
import { SpinnerCircular } from "spinners-react";
import pluralize from "pluralize-ru";

import { reduxWrapper } from "../../store";

import Header from "../components/Header";
import Footer from "../components/Footer";
import InnerMenu from "./components/InnerMenu";
import Company from "../components/Company";
import DateInput from "../components/DatePicker";
import DownloadPrintFormPdfButton from "../components/DownloadPrintFormPdfButton";
import DownloadFinesPdfButton from "../components/DownloadFinesPdfButton";

import PenaltiesCalculatorForm from "./components/PenaltiesCalculatorForm";

import {
	getContractInfo, 
	getContractDocuments, 
	getReconciliationFile, 
	getContractPenalties, 
} from "../../actions";

const TYPES = {
	upd: "УПД по очередным платежам",
	upd_avans: "УПД по авансовым платежам",
	billfines: "Счета-уведомления на пени",
	billgibdd: "BillGIBDD",
	fines: "Штрафы ГИБДД",
};

class ContractDocumentsPage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			opened: [], 
			date: null, 
			car: null, 
			contract_date: null, 
			documents: null, 
			loading: false, 
			valid_date_start: null, 
			valid_date_end: null, 
			period_date_start: null, 
			period_date_end: null, 
			reconciliation_requested: false, 
			reconciliation_disabled: false, 
			penalties: false, 
			penalties_date: moment().format("YYYY.MM.DD"), 
			penalties_result: undefined, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			date: nextProps.date,
			car: nextProps.car,
			contract_date: nextProps.contract_date,
			documents: nextProps.documents,
		};
	}

	componentDidMount() 
	{
		if (!this.state.loading && this.props.number !== undefined) 
		{
			const de = moment().toDate();
			this.setState(
				{ loading: true, period_date_end: de, valid_date_end: de },
				() => {
					getContractInfo({
						dispatch: this.props.dispatch,
						number: this.props.number,
					});

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

	componentDidUpdate(prevProps, prevState) 
	{
		if (this.state.period_date_start === null) 
		{
			if (
				prevState.contract_date === null &&
				this.state.contract_date !== null
			) {
				const ds = moment(this.state.contract_date).toDate();
				this.setState({ period_date_start: ds, valid_date_start: ds });
			}
		}
	}

	_handle_onReconciliationFileRequest = () => 
	{
		const { number } = this.props;
		const { reconciliation_requested, period_date_start, period_date_end } = this.state;

		if (!reconciliation_requested) 
		{
			this.setState({ reconciliation_requested: true }, () => 
			{
				const date_from = moment(period_date_start).format("YYYY-MM-DD");
				const date_to = moment(period_date_end).format("YYYY-MM-DD");

				getReconciliationFile({
					contract: number,
					date_from: date_from,
					date_to: date_to,
					filename: `${number}_reconciliation_${date_from}_${date_to}.pdf`,
				})
				.then(() => {
					this.setState({ reconciliation_requested: false });
				})
				.catch(() => {
					this.setState({ reconciliation_requested: false });
				});
			});
		}
	};

	_handle_onPeriodDate_start = (date) => 
	{
		const {
			valid_date_start,
			valid_date_end,
			period_date_start,
			period_date_end,
		} = this.state;
		const md = moment(date, "DD.MM.YYYY");

		if (md.isValid()) 
		{
			if (date >= valid_date_start && date <= valid_date_end) 
			{
				if (date < period_date_end) 
				{
					this.setState({
						period_date_start: date,
						reconciliation_disabled: false,
					});
				} 
				else 
				{
					this.setState({
						period_date_start: date,
						reconciliation_disabled: true,
					});
				}
			} 
			else 
			{
				this.setState({
				period_date_start: date,
				reconciliation_disabled: true,
				});
			}
		} 
		else 
		{
			this.setState({ reconciliation_disabled: true });
		}
	};

	_handle_onPeriodDate_end = (date) => 
	{
		const {
			valid_date_start,
			valid_date_end,
			period_date_start,
			period_date_end,
		} = this.state;

		if (moment(date).isValid()) 
		{
			if (date >= valid_date_start && date <= valid_date_end) 
			{
				if (date > period_date_start) 
				{
					this.setState({
						period_date_end: date,
						reconciliation_disabled: false,
					});
				} 
				else 
				{
					this.setState({
						period_date_end: date,
						reconciliation_disabled: true,
					});
				}
			} 
			else 
			{
				this.setState({ period_date_end: date, reconciliation_disabled: true });
			}
		} 
		else 
		{
			this.setState({ reconciliation_disabled: true });
		}
	};

	_handle_onGroup = (group) => 
	{
		const opened = [...this.state.opened];

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

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

	_renderDocuments = (documents, type) => 
	{
		const { number } = this.props;
		const { opened } = this.state;

		if (documents !== undefined && documents !== null) 
		{
			if (documents.length > 0) 
			{
				return (
					<>
						<div className="block-column">
							<div
								className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
							>
								<div className="block_header default">
									<p>{TYPES[type]}</p>
								</div>
							</div>
							<div className="dosc_list medium-icon">
								{ documents
								.slice(0, opened.indexOf(type) > -1 ? documents.length : 3)
								.map((doc, index) => 
								{
									return (
										<div className="row" key={index}>
											<p
												className="doc_name i-pdf i-medium"
												data-format={doc.extension}
											>
												{doc.num} от {moment(doc.date).format("DD.MM.YYYY")}
											</p>
											<DownloadPrintFormPdfButton
												className="download-icon"
												filename={`${number}_${doc.type}_${doc.num}.${doc.extension}`}
												contract={number}
												num={doc.num}
												date={doc.date}
												type={doc.type}
											/>
										</div>
									);
								}) }
								{ opened.indexOf(type) < 0 && documents.length > 3 && (
									<div
										className="row click-more"
										onClick={ () => this._handle_onGroup(type) }
									>
										<p>
											Еще {documents.length - 3}{" "}
											{ pluralize(
												documents.length - 3,
												"документов",
												"документ",
												"документа",
												"документов"
											) }
										</p>
									</div>
								) }
							</div>
						</div>
					</>
				);
			}

			if (type !== "upd_avans" && type !== "billfines") 
			{
				return (
					<>
						<div className="block-column">
							<div
								className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
							>
								<div className="block_header">
									<p>{ TYPES[ type ] }</p>
								</div>
							</div>
							<div>
								<p>Документов пока еще нет.</p>
								<p>&nbsp;</p>
							</div>
						</div>
					</>
				);
			}
		}

		return null;
	};

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

		window.scrollTo(0, 0);
		this.setState({ penalties: true, penalties_date: date, penalties_result: undefined }, () => 
		{
			getContractPenalties({ number, date })
			.then((result) => 
			{
				this.setState({ penalties_result: result });
			})
			.catch(() => 
			{

			});
		});
	}

	_handle_onPenaltiesHide = () => 
	{
		this.setState({ penalties: false, penalties_result: undefined }, () => 
		{
		});
	}

	render() 
	{
		const { number } = this.props;
		const {
			loading,
			date,
			car,
			contract_date,
			documents,
			period_date_start,
			period_date_end,
			valid_date_start,
			valid_date_end,
			reconciliation_requested,
			reconciliation_disabled,
			opened,
			penalties, 
			penalties_date, 
			penalties_result, 
		} = this.state;

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга" />
				</Head>
				<Header { ...this.props }/>
				{ penalties ? (
					<main>
						<section>
							<div className="clear"></div>
							<div className="container">
								<div className="title_wrapper">
									<div className="left" style={{ alignItems: "center", flexWrap: "wrap", alignItems: "flex-start" }}>
										<button className="back" onClick={ this._handle_onPenaltiesHide }>Назад</button>
										<div style={{ flexDirection: "column" }}>
											<h1 className="section_title">Расчет планируемых пени</h1>
											<h5 style={{ fontSize: "14px" }}>
												Договор №{ number }
												{ date !== undefined && date !== null && date !== null && (
													<> от {moment(date).format("DD.MM.YYYY")}</>
													) }
												{ car !== undefined && car !== null
												? ` - ${car.brand.name} ${car.model.name} | ${
													car.reg_number !== null
													? car.reg_number
													: "без рег. номера"
												} | ${
													car.vin_number !== null
													? car.vin_number
													: "без VIN номера"
												}`
												: "" }
											</h5>
										</div>
									</div>
								</div>
								<div className="aside_container about">
									<article className="fine">
										<div className="fine_block">
											<div className="fine_col">
												<p>
													<span>Пени на дату</span>
													{ moment(penalties_date, "YYYY.MM.DD").format("DD.MM.YYYY") }
												</p>
											</div>
											{ penalties_result === undefined ? (
												<div
													style={{ minHeight: 200, 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>
											) : (
												<>
													{ penalties_result.length > 0 ? (
														<div className="fine_col">
															{ penalties_result.map((bill, index) => (
																<p key={ index }>
																	{ moment(bill.dateBillout, "YYYY-MM-DD").format("MMMM") }
																	<span>{ numeral(bill.sumBill).format(' ., ') }&nbsp;₽</span>
																</p>															
															)) }
														</div>
													) : (
														<p>К сожалению на указанную дату расчет пени невозможен.</p>
													) }
												</>
											)}
										</div>
									</article>
								</div>
							</div>
						</section>
					</main>
				) : (
					<main>
						<section>
							<div className="clear"></div>
							<div className="container">
								<div className="title_wrapper">
									<div className="left" style={{ flexDirection: "column" }}>
										<h1 className="section_title">Договор №{ number }</h1>
										<h5 style={{ fontSize: "14px" }}>
											{ date !== undefined && date !== null && date !== null && (
												<> от {moment(date).format("DD.MM.YYYY")}</>
											) }
											{ car !== undefined && car !== null
											? ` - ${car.brand.name} ${car.model.name} | ${
												car.reg_number !== null
													? car.reg_number
													: "без рег. номера"
												} | ${
												car.vin_number !== null
													? car.vin_number
													: "без VIN номера"
												}`
											: "" }
										</h5>
									</div>
									<Company { ...this.props }/>
								</div>
								<div className="aside_container about">
									<InnerMenu number={ number } { ...this.props }/>
									<article>
										{ 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>
										) : (
											<>
												<div className="reconciliation_form">
													<p>Акт сверки</p>
													<div className="form_group">
														<div className="form_field">
															<DateInput
																placeholder="Дата начала периода"
																value={period_date_start}
																min={valid_date_start}
																max={valid_date_end}
																onChange={this._handle_onPeriodDate_start}
															/>
														</div>
														<div className="form_field">
															<DateInput
																placeholder="Дата окончания периода"
																value={period_date_end}
																min={valid_date_start}
																max={valid_date_end}
																onChange={this._handle_onPeriodDate_end}
															/>
														</div>
													</div>
													<div className="form_group">
														<button
															className="button button-blue"
															disabled={reconciliation_disabled}
															onClick={() => {
																this._handle_onReconciliationFileRequest();
															}}
														>
															<>
																{reconciliation_requested ? (
																	<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
																) : (
																	"Скачать"
																)}
															</>
														</button>
														{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
													</div>
												</div>
												<div className="dropdown_blocks_list">
													{documents !== undefined && documents !== null ? (
														<>
															{this._renderDocuments(documents.upd, "upd")}
															{this._renderDocuments(
																documents.upd_avans,
																"upd_avans"
															)}
															{this._renderDocuments(
																documents.billfines,
																"billfines"
															)}
														</>
													) : null}
													{ documents !== undefined && documents !== null && documents.billfines !== undefined && documents.billfines !== null && documents.billfines.length > 0 && (
														<PenaltiesCalculatorForm onPenalties={ this._handle_onPenaltiesShow }/>
													) }
												</div>
											</>
										) }
									</article>
								</div>
							</div>
						</section>
					</main>
				) }
				<Footer authenticated={ true }/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contract_date: state.contract.date,
		date: state.contract.date,
		car: state.contract.car,
		documents: state.contract.documents,
	};
}

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

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

{
/*}
	<div className="block_body">
		<div className="transaction_detail">
			<p>№ постановления: <b>3432434242334</b></p>
			<ul>
				<li>Сумма: <b>3 000,00 р.</b></li>
				<li>Дата:  <b>01/01/2020</b></li>
				<li>Статус: <b className="success">Оплачен</b></li>
				<li>Штраф: п. 1.15 - Несоблюдение правил парковки </li>
			</ul>
		</div>
	</div>
{*/
}