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 { reduxWrapper } from "../../store";

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

import {
	getContractInfo,
	getContractAgreement,
	getContractRules,
	getFile,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
import ContractHeader from "./components/ContractHeader";

class ContractPage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = 
		{
			loading: false,
			contracts_info: {}, 
			unsigned: null,
			signed: null,
			rules: null,
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			contracts_info: nextProps.contracts_info, 
			unsigned: nextProps.unsigned, 
			signed: nextProps.signed, 
			rules: nextProps.rules, 
		};
	}

	componentDidMount() 
	{
		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 })
					.then((contract_info) => 
					{
						const { date } = contract_info;
						this._loadData(date);	
					});
				}
				else
				{
					const { date } = this.state.contracts_info[ number ];
					this._loadData(date);
				}
			});
		}
	}

	_loadData = (date) => 
	{
		const { dispatch, number} = this.props;

		getContractRules({
			dispatch,
			date: moment(date, "YYYY-MM-DD").format("DD.MM.YYYY"),
		})
		.then(() => {})
		.catch(() => {});

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

	_renderDocuments = (documents, type) => 
	{
		const types = {
			contracts: "Договор",
			redemptions: "Выкупные документы",
			agreements: "Дополнительное соглашение",
			assignments: "Договор цессии",
		};

		return documents[ type ].map((file, file_index) => 
		{
			console.log("file", file);
			return (
				<div className="row" key={ file_index }>
					<p className="doc_name i-pdf extension" data-format={ file.extension }>
						{ types[ type ] }
						<span style={{ width: "100%" }}>
							{ file.number } от{" "}{ moment(file.date).format("DD.MM.YYYY") }
						</span>
						{ file.type !== undefined && (<span>{ file.type }</span>) }
					</p>
					<DownloadPdfButton id={ file.url } filename={`evoleasing_${ types[ type ] }_${ file.type }_${ file.number }_${ file.date }.${ file.extension }`} />
					{/*}
						<a className="button button-blue">Подписать по ЭДО</a>
					{*/}
				</div>
			);
		});
	}

	render() 
	{
		const { number } = this.props;
		const { loading, contracts_info, unsigned, signed, rules } = this.state;

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

		console.log("rules", rules);
		console.log("unsigned", unsigned);
		console.log("signed", signed);

		const types = {
			contracts: "Договор",
			redemptions: "Выкупные документы",
			agreements: "Дополнительное соглашение",
			assignments: "Договор цессии",
		};

		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>
							{ 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="dosc_list medium-icon">
									{ unsigned !== undefined && unsigned !== null && unsigned.documents !== undefined && unsigned.documents !== null && unsigned.count > 0 && (
										<>
											<p className="list_title">К подписанию</p>
											{ this._renderDocuments(unsigned.documents, "contracts") }
											{ this._renderDocuments(unsigned.documents, "agreements") }
											{ this._renderDocuments(unsigned.documents, "assignments") }
											{ this._renderDocuments(unsigned.documents, "redemptions") }
										</>
									) }
									{ signed !== undefined && signed !== null && signed.documents !== undefined && signed.documents !== null && signed.count > 0 && (
										<>
											<p className="list_title">Действующие</p>
											{ this._renderDocuments(signed.documents, "contracts") }
											{ this._renderDocuments(signed.documents, "agreements") }
											{ this._renderDocuments(signed.documents, "assignments") }
											{ this._renderDocuments(signed.documents, "redemptions") }
										</>
									) }
									{ rules !== undefined && rules !== null && rules.map((document, index) => (
										<div className="row" key={ index} >
											<p className="doc_name i-pdf">
												{ document.name }
												<span style={{ width: "100%" }}>
													Дата вступления в силу: { document.active_from }
												</span>
											</p>
											<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true } />
										</div>
									)) }
								</div>
							) }
						</article>
					</div>
				</AccountLayout>
				<Footer/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contracts_info: state.contracts_info, 
		unsigned: state.contract.agreement.unsigned,
		signed: state.contract.agreement.signed,
		rules: state.contract.rules,
	};
}

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

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