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 ChangeGraphicComparePage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			date: null,
			car: null,
			contract_date: null,
			agreement: null,
			rules: null,
			loading: false,
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			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(() => {});
			});
		}
	}

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

		console.log("rules", rules);

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга" />
				</Head>
				<Header {...this.props} />
				<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">
								<article className="compare">
									<div className="compare_top">
										<p>
											Выбранный(ые) варианты изменения графика
											<Link href="#">
												<a>Вернуться к параметрам изменения графика</a>
											</Link>
										</p>
										<button className="button button-blue">Скачать PDF</button>
									</div>
									<div className="compare_data">
										<div className="form_field">
											<input type="checkbox" hidden id="" name="" checked disabled />
											<label htmlFor="">Изменить дату платежа</label>
										</div>
										<div className="form_field">
											<input type="checkbox" hidden id="" name="" checked disabled />
											<label htmlFor="">Изменение кол-ва платежей</label>
										</div>
										<div className="form_field">
											<p>
												<span>Дата платежа:</span> 1 месяц (37 платежей)
											</p>
										</div>
										<div className="form_field">
											<p>
												<span>Тип каникул:</span> С увеличением срока
											</p>
										</div>
									</div>
									<div className="compare_tables">
										<div className="compare_table">
											<p className="table_title">Текущий график</p>
											<div className="table_body">
												<div className="table_row table_header">
													<div>№</div>
													<div className="sortable">
														Дата лизингового платежа
													</div>
													<div className="sortable">Лизинговый платеж с НДС ₽</div>
													<div className="sortable">Сумма досрочного выкупа</div>
												</div>
												<div className="table_row row-button">
													<button className="button button-gray">
														Показать прошедшие платежи
													</button>
												</div>
												<div className="table_row">
													<div>14</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>15</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>16</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>17</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>18</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>19</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>20</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
											</div>
										</div>
										<div className="compare_table">
											<p className="table_title">
												Изменения с платежа №ХХ от ХХ.ХХ.ХХХХ
											</p>
											<div className="table_body">
												<div className="table_row table_header">
													<div>№</div>
													<div className="sortable">
														Дата лизингового платежа
													</div>
													<div className="sortable">
														Лизинговый платеж с НДС ₽
													</div>
													<div className="sortable">
														Сумма досрочного выкупа
													</div>
												</div>
												<div className="table_row row-button">
													<button className="button button-gray">
														Показать прошедшие платежи
													</button>
												</div>
												<div className="table_row">
													<div>14</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>15</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>16</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>17</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>18</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>19</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
												<div className="table_row">
													<div>20</div>
													<div>21.02.2021</div>
													<div>239 724,05</div>
													<div>43 079,18</div>
												</div>
											</div>
										</div>
										<div className="compare_table touchable">
											<div className="table_body">
												<button className="button button-gray">
													Показать прошедшие платежи
												</button>
												<div className="table_row opened">
													<p className="row_title">Платеж №14</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
												<div className="table_row">
													<p className="row_title">Платеж №15</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
												<div className="table_row">
													<p className="row_title">Платеж №15</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
												<div className="table_row">
													<p className="row_title">Платеж №15</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
												<div className="table_row">
													<p className="row_title">Платеж №15</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
												<div className="table_row">
													<p className="row_title">Платеж №15</p>
													<div className="table_group">
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
														<div className="table_cell">
															<div><span>Текущий график</span> 21.02.2021</div>
															<div><span>На сумму</span> 239 724,05</div>
															<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div className="compare_suscr">
										<p className="block_title">
											Подписанты
											<Link href="#">
												<a>Все</a>
											</Link>
										</p>
										<div className="feed static">
											<div className="feed_item user">
												<input type="radio" hidden id="user_1" name="user_1" />
												<label htmlFor="user_1"></label>
												<img src="/assets/images/icons/avatar.svg" alt="" />
												<div>
													<p className="item_title">Иванов Иван</p>
													<p className="item_desc">Менеджер по продажам</p>
												</div>
											</div>
											<div className="feed_item user">
												<input type="radio" hidden id="user_1" name="user_1" />
												<label htmlFor="user_1"></label>
												<img src="/assets/images/icons/avatar.svg" alt="" />
												<div>
													<p className="item_title">Иванов Иван</p>
													<p className="item_desc">Менеджер по продажам</p>
												</div>
											</div>
											<div className="feed_item user">
												<input type="radio" hidden id="user_1" name="user_1" />
												<label htmlFor="user_1"></label>
												<img src="/assets/images/icons/avatar.svg" alt="" />
												<div>
													<p className="item_title">Иванов Иван</p>
													<p className="item_desc">Менеджер по продажам</p>
												</div>
											</div>
											<div className="feed_item user">
												<input type="radio" hidden id="user_2" name="user_2" />
												<label htmlFor="user_2"></label>
												<img src="/assets/images/icons/avatar.svg" alt="" />
												<div>
													<p className="item_title">Иванов Иван</p>
													<p className="item_desc">Менеджер по продажам</p>
												</div>
											</div>
											<div className="feed_item user">
												<input type="radio" hidden id="user_3" name="user_3" />
												<label htmlFor="user_3"></label>
												<img src="/assets/images/icons/avatar.svg" alt="" />
												<div>
													<p className="item_title">Иванов Иван</p>
													<p className="item_desc">Менеджер по продажам</p>
												</div>
											</div>
										</div>
									</div>
									<div className="btn_group">
										<button className="button button-blue">
											Согласовать и подписать в бумажном виде
										</button>
										<button className="button button-blue">
											Согласовать и подписать по ЭДО
										</button>
									</div>
									<div className="compare_message">
										<p>
											Дополнительное соглашение отправлено на согласование. После согласования документ появится на странице <br />
											<Link href="#">«Документы по договору» </Link>
										</p>
									</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,
		agreement: state.contract.agreement,
		rules: state.contract.rules,
	};
}

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

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