import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import { connect } from "react-redux";
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';

import { withRouter } from 'next/router';
import { reduxWrapper } from '../../store';

import InnerMenu from "./components/InnerMenu";
import Header from '../components/Header';
import Footer from '../components/Footer';
import Pagination from '../components/Pagination';
import Company from "../components/Company";

import { sendPhoneChangeNumber, sendPhoneChangeNumberSmsCode, setUserPhone } from '../../actions';

class IndexPage extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			
			user: {}, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			user: nextProps.user, 
		};
	}



	
	render()
	{

		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">
									<h1 className="section_title">Личный кабинет</h1>
								</div>
								<Company/>
							</div>
							<div className="aside_container about">
								<InnerMenu { ...this.props }/>
								<article>
									<div className="settings_user_control">
										<p>Настройки доступа к личному кабинету</p>

										<div>
											<button className="button button-blue">Добавить пользователя</button>
											<button className="button button-blue">Редактировать</button>
										</div>
									</div>

									<div className="settings_table editable">
										<div className="table_header table_row">
											<div className="table_cell">ФИО пользователя</div>
											<div className="table_cell">Почта</div>
											<div className="table_cell">Роль</div>
											<div className="table_cell">Доступные организации</div>
											<div className="table_cell">Статус</div>
											<div className="table_cell"></div>
										</div>

										<div className="table_row">
											<div className="table_cell">Иванов Иван Иванович</div>
											<div className="table_cell">iivanov@mail.com</div>
											<div className="table_cell">Администратор</div>
											<div className="table_cell">Все организации</div>
											<div className="table_cell">Активен</div>
											<div className="table_cell">
												<button className="delete_user" title="Удалить пользователя"></button>
											</div>
										</div>

										<div className="table_row">
											<div className="table_cell">Иванов Иван Иванович</div>
											<div className="table_cell">iivanov@mail.com</div>
											<div className="table_cell">Администратор</div>
											<div className="table_cell">Все организации</div>
											<div className="table_cell">Активен</div>
											<div className="table_cell">
												<button className="delete_user" title="Удалить пользователя"></button>
											</div>
										</div>
										<div className="table_row editable">
											<div className="table_cell">
												<input type="text" placeholder="Введите ФИО" />	
											</div>
											<div className="table_cell">
												<input type="email" placeholder="Введите почту" />
											</div>
											<div className="table_cell">Пользователь</div>
											<div className="table_cell">
												<button className="settings_dropdown" data-selected="false">Выберите организацию</button>
												<div className="dropdown_list opened">
													<div className="list_item">
														<input type="checkbox" value="" name="companies_list" id="company_1" hidden />
														<label htmlFor="company_1">
															Все организации
														</label>
													</div>
													<div className="list_item">
														<input type="checkbox" value="" name="companies_list" id="company_2" hidden />
														<label htmlFor="company_2">
															ООО “Еще одно название”
															<span>ИНН: 12345678765 КПП: 13432-02</span>
														</label>
													</div>
													<div className="list_item">
														<input type="checkbox" value="" name="companies_list" id="company_3" hidden />
														<label htmlFor="company_3">
															ООО “Друзья и КО”
															<span>ИНН: 12345678765 КПП: 13432-02</span>
														</label>
													</div>
												</div>
											</div>
											<div className="table_cell">-</div>
											<div className="table_cell">
												<button className="delete_user" title="Удалить пользователя"></button>
											</div>
										</div>
									</div>
								</article>
							</div>
						</div>
					</section>
				</main>
				<Footer/>
			</React.Fragment>
		)
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		user: state.user, 
	}
}

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

		if(req.headers.cookie !== undefined)
		{
			const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");

			if(cookies.jwt === undefined || cookies.jwt === null)
			{
				res.statusCode = 302;
				res.setHeader('Location', `/login`);
			}
			else
			{
				//const tokenValid = await checkToken(cookies.jwt);
				const tokenValid = true;
				if(!tokenValid)
				{
					res.statusCode = 302;
					res.setHeader('Location', `/login`);
				}
			}
		}
		else
		{
			res.statusCode = 302;
			res.setHeader('Location', `/login`);
		}
	
		return { props: props };
	}
);

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