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 SignatoriesList from "./change/components/SignatoriesList";
import CalculationsList from "./change/components/CalculationsList";

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

class ChangeGraphicPage 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">
								<InnerMenu number={number} {...this.props} />
								<article className="changes">
									<div className="block alert">
										<p>
											Внимание! Существует активное неподписанное дополнительное
											соглашение. Расчёт новых изменений невозможен
										</p>
										<Link href="#">
											<a>Подробнее</a>
										</Link>
									</div>
									<div className="block">
										<p className="title">Предварительные расчеты</p>
										<CalculationsList />
									</div>
									<div className="block">
										<p className="title">
											Подписанты
											<Link href="">
												<a>Добавить подписанта</a>
											</Link>
										</p>
										<SignatoriesList />
									</div>
									<div className="block">
										<p className="title">Варианты изменения графиков</p>
										<form>
											<div className="form_field">
												<input type="checkbox" hidden id="option_1" name="options" />
												<label htmlFor="option_1">Изменить дату платежа</label>
												<div className="help_tooltip">
													<div className="help_icon">
														<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
															<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
															<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
															<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
														</svg>
													</div>
													<div className="help_content ">
														{" "}
														{/* opened */}
														<div>
															<p>Какой-то описательный текст</p>
															<p className="button">Закрыть</p>
														</div>
													</div>
												</div>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_2" name="options" />
												<label htmlFor="option_2">
													Изменение параметров страхования
												</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_3" name="options" />
												<label htmlFor="option_3">
													Изменение формулировки выкупной платеж
												</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_4" name="options"/>
												<label htmlFor="option_4">Лизинговые каникулы</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_5" name="options" />
												<label htmlFor="option_5">
													Изменение кол-ва платежей
												</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_6" name="options" />
												<label htmlFor="option_6">Изменение суммы платежей</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_7" name="options" />
												<label htmlFor="option_7">Досрочный выкуп</label>
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="option_8" name="options" />
												<label htmlFor="option_8">Изменение Лизингополучателя</label>
											</div>
											<button className="button button-blue" disabled>
												Далее
											</button>
										</form>
									</div>
									<div className="block">
										<p className="title">Варианты изменения графиков</p>
										<form className="calc">
											<div className="form_field">
												<label>Дата платежа</label>
												<DateInput placeholder="" id={"date_to"} onChange={ (date) => this.setState({ date_to: date }) } />
											</div>
											<div className="form_field">
												<input type="checkbox" hidden id="fix_pay" name="fix_pay" />
												<label htmlFor="fix_pay">
													Фиксировать последний платеж
												</label>
												<div className="help_tooltip">
													<div className="help_icon">
														<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
														<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
														<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
														<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
														</svg>
													</div>
													<div className="help_content ">
														{" "}
														{/* opened */}
														<div>
															<p>Какой-то описательный текст</p>
															<p className="button">Закрыть</p>
														</div>
													</div>
												</div>
											</div>
											<div className="form_field">
												<label>Тип каникул</label>
												<div className="form_field">
													<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" />
													<label htmlFor="weeekend_type_1">
														Фиксировать последний платеж
													</label>
												</div>
												<div className="form_field">
													<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" />
													<label htmlFor="weeekend_type_2">
														Фиксировать последний платеж
													</label>
												</div>
											</div>
											<div className="form_field">
												<label>Увеличить график на</label>
												<select>
													<option>1 месяц (37 платеж)</option>
												</select>
											</div>
											<div className="form_field">
												<label>Увеличить график на</label>
												<input type="number" placeholder="Укажите сумму" />
												<div className="help_tooltip">
													<div className="help_icon">
														<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
															<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
															<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
															<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
														</svg>
													</div>
													<div className="help_content ">
														{" "}
														{/* opened */}
														<div>
															<p>Какой-то описательный текст</p>
															<p className="button">Закрыть</p>
														</div>
													</div>
												</div>
											</div>
											<div className="btn_group">
												<button className="button button-gray">Назад</button>
												<button className="button button-blue">Рассчитать график</button>
											</div>
										</form>
									</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)(ChangeGraphicPage));