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 DateInput from "../components/DatePicker";

import {
	getContractInfo,
	getContractAgreement,
	getContractRules,
	getFile,
} from "../../actions";

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

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

	componentDidMount() 
	{
		if(!this.state.loading && this.props.number !== undefined) 
		{
			this.setState({ loading: true }, () => 
			{
				getContractInfo({
					dispatch: this.props.dispatch,
					number: this.props.number,
				})
				.then((info) => 
				{
					console.log("info", info);

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

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

		document.documentElement.style.height = "100%";
		document.documentElement.style.display = "flex";
		document.documentElement.style.flexDirection = "column";

		document.body.style.height = "100%";
		document.body.style.display = "flex";
		document.body.style.flexDirection = "column";
	}

	componentWillUnmount()
	{
		document.documentElement.style.height = "unset";
		document.documentElement.style.display = "unset";
		document.documentElement.style.flexDirection = "unset";
		document.body.style.height = "unset";
		document.body.style.display = "unset";
		document.body.style.flexDirection = "unset";
	}  

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

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

		console.log("rules", rules);

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

		return (
			<React.Fragment style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "spaceBetween", alignItems: "stretch" }}>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга"/>
				</Head>
				<Header { ...this.props }/>
				<main style={{ height: "100%", display: "flex", flexDirection: "column" }}>
					<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">Назад</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>
												10.04.2022
											</p>
										</div>
										<div className="fine_col">
											<p>
												Февраль
												<span>28,11 ₽</span>
											</p>
											<p>
												Февраль
												<span>1520,20 ₽</span>
											</p>
											<p>
												Февраль
												<span>28,11 ₽</span>
											</p>
											<p>
												<span>ИТОГО:</span>
												<span>2322,46 ₽</span>
											</p>
										</div>
									</div>
								</article>
							</div>
						</div>
					</section>
				</main>
				<Footer authenticated={ true }/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contracts_info: state.contracts_info, 
		contract_date: state.contract.date,
		date: state.contract.date,
		car: state.contract.car,
		agreement: state.contract.agreement,
		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));
