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 {
	getContractInfo,
	getContractAgreement,
	getContractRules,
	getFile,
} from "../../actions";

class ContractPage 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() {}

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

		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">Обращение</h1>
								</div>
							</div>
							<div className="aside_container about">
								<article className="full">
									<div className="new_appeal">
										<div className="column full">
											<div className="column_text_block">
												<p>
													<b>Досрочное прекращение срока действия договора лизинга</b>
												</p>
												<p>
													<b>Процедура</b>
												</p>
												<p>
													К каждой теме свободное html поле для миниинструкции
													(со ссылками на <a>формы документов</a> и{" "}
													<a>документы</a>). Привязка к теме обращения в CRM
												</p>
											</div>
											<div className="column_text_block">
												<p>
													<b>Документы</b>
												</p>
												<div className="dosc_list medium-icon">
													<div className="row">
														<p className="doc_name i-pdf extension">
															№2021_1655 от 20.04.2021
															<span>2021_1655 от 20.04.2021</span>
														</p>
													</div>
													<div className="row">
														<p className="doc_name i-pdf extension">
															№2021_1655 от 20.04.2021
															<span>2021_1655 от 20.04.2021</span>
														</p>
													</div>
												</div>
											</div>
											<button className="button button-blue">Создать обращение</button>
										</div>
									</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)(ContractPage));
