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 NotificationMessage from "../components/Events/NotificationMessage";

import { getContractInfo, getFilteredEvents } from "../../actions";
import AccountLayout from "../components/Layout/Account";
import ContractHeader from "./components/ContractHeader";

class ContractPage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			loading: true,
			contracts_info: {}, 
			events_loaded: false, 
			filtered: undefined, 
			contract_events: {}, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			contracts_info: nextProps.contracts_info, 
			events_loaded: nextProps.events_loaded, 
			filtered: nextProps.filtered, 
		};
	}

	componentDidMount() 
	{
		const { dispatch, number} = this.props;

		if(this.state.contracts_info[ number ] === undefined)
		{
			getContractInfo({ dispatch, number });
		}

		if(this.state.events_loaded)
		{
			getFilteredEvents({ dispatch, contract: number });
		}
	}

	componentDidUpdate(prevProps, prevState)
	{
		if(this.state.events_loaded && !prevState.events_loaded)
		{
			getFilteredEvents({ dispatch: this.props.dispatch, contract: this.props.number });
		}
	}

	render() 
	{
		const { number } = this.props;
		const { loading, contracts_info, events_loaded, filtered, } = this.state;

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

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга" />
				</Head>
				<Header { ...this.props }/>
				<AccountLayout>
					<div className="title_wrapper">
						<div className="left" style={{ flexDirection: "column" }}>
							<ContractHeader number={ number } date={ date } car={ car }/>
						</div>
						<Company { ...this.props }/>
					</div>
					<div className="aside_container about">
						<InnerMenu number={ number } status={ status } { ...this.props } />
						<article>
							{ filtered !== undefined ? (
								<>
								{ filtered.length > 0 ? (
									<ul className="list events-list">
										{ filtered.map((event, index) => (
											<NotificationMessage event={ event } key={ index }/>
										)) }
									</ul>
								) : (
									<p>Нет событий по данному договору.</p>
								) }
								</>
							) : (
								<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
									<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
								</div>
							) }
						</article>
					</div>
				</AccountLayout>
				<Footer/>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contracts_info: state.contracts_info, 
		events_loaded: state.events.loaded, 
		filtered: state.events.filtered, 
	};
}

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

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