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, getContractMaterials } from "../../actions";

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

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

	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);

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

				});
			});	
		}
	}

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

		console.log("materials", materials);

		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/>
							</div>
							<div className="aside_container about">
								<InnerMenu number={ number } { ...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">
											{ materials !== undefined && materials !== null && materials.map((document, index ) => (
												<div className="row" key={ index }>
													<p className="doc_name i-pdf">
														{ document.name }
														{ document.description !== null && document.description !== "" && (
															<span style={{ width: "100%"}}>{ document.description }</span>
														) }
													</p>
													<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true }/>
												</div>
											)) }
										</div>
									) }
								</article>
							</div>
						</div>
					</section>
				</main>
				<Footer/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		contract_date: state.contract.date, 
		date: state.contract.date, 
		car: state.contract.car, 
		materials: state.contract.materials, 
	}
}

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

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