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 { reduxWrapper } from '../store';
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';

import Header from './components/Header';
import Footer from './components/Footer';
import MainHeader from "./components/MainHeader";
import FormRequest from "./components/FormRequest";

import { logout } from '../actions';

class LogoutPage extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
		};
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
		};
	}

	componentDidMount()
	{
		logout({ dispatch: this.props.dispatch, })
		.then(() => 
		{
			this.props.router.push("/");
		})
		.catch(() => 
		{
			this.props.router.push("/");
		});
	}

	render()
	{
		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta
						name="description"
						content="ЛК Эволюция автолизинга"
					/>
				</Head>
				<MainHeader logo_url={ process.env.NEXT_PUBLIC_MAIN_SITE } />
				<main>
					<section>
						<div className="clear"></div>
						<div className="container" style={{ width: "100vw", height: "80vh", 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>
					</section>
				</main>
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps)
{
	return {
	}
}

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

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