import React from "react";
import * as ReactDOM from 'react-dom';
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 {
	getSupportThemes,
	getContractsList,
} from "../../actions";

class SupportRequestPage extends React.Component 
{
	constructor(props) {
		super(props);
		this.state = { 
			loading: false, 
			contracts: null, 
			themes: null, 
			name:  "", 
			phone: "", 
			email: "", 
			question: "", 
			file: null, 
			opened_theme: 0, 
			opened_question: 0, 
		};
	}

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

	componentDidMount()
	{
		console.log("CDM", "SupportRequestPage", this.state);

		ReactDOM.findDOMNode(this).parentNode.style.height = "100%";
		ReactDOM.findDOMNode(this).parentNode.style.display = "flex";
		ReactDOM.findDOMNode(this).parentNode.style.flexDirection = "column";
		ReactDOM.findDOMNode(this).parentNode.style.justifyContent = "spaceBetween";
		ReactDOM.findDOMNode(this).parentNode.style.alignItems = "stretch";

		document.documentElement.style.height = "100%";
		document.documentElement.style.display = "flex";
		document.documentElement.style.flexDirection = "column";
		document.body.style.height = "100%";
		document.body.style.display = "flex";
		document.body.style.flexDirection = "column";	

		if (!this.state.loading) 
		{
			this.setState({ loading: true }, () => 
			{
				Promise.all([
					getContractsList({ dispatch: this.props.dispatch, all: true }), 
					getSupportThemes({ dispatch: this.props.dispatch })	
				])
				.then(() => 
				{
					this.setState({ loading: false });
				})
				.catch(() => {});
			});
		}
	}

	componentWillUnmount()
	{
		ReactDOM.findDOMNode(this).parentNode.style.height = "unset";
		ReactDOM.findDOMNode(this).parentNode.style.display = "unset";
		ReactDOM.findDOMNode(this).parentNode.style.flexDirection = "unset";
		ReactDOM.findDOMNode(this).parentNode.style.justifyContent = "unset";
		ReactDOM.findDOMNode(this).parentNode.style.alignItems = "unset";
	
		document.documentElement.style.height = "unset";
		document.documentElement.style.display = "unset";
		document.documentElement.style.flexDirection = "unset";
		document.body.style.height = "unset";
		document.body.style.display = "unset";
		document.body.style.flexDirection = "unset";
	}

	componentDidUpdate(prevProps, prevState)
	{
	}

	_handle_onBack = () => 
	{
		this.props.router.push('/support/faq/');
	}

	_handle_onChangeTheme = (index) => 
	{
		this.setState({ opened_theme: index, opened_question: 0 });
	}

	_handle_onSelectContracts = (event) => 
	{
	}

	_renderForm = () => 
	{
		const { loading, contracts, themes, name, phone, email, question, file, opened_theme, opened_question } = this.state;

		return (
			<form>
				<div className="form_field">
					<select multiple={ false } onChange={ this._handle_onSelectContracts }>
						<option default selected disabled>Выберите договоры</option>
						{ contracts !== undefined && contracts !== null && contracts.map((contract, index) => (
							<option index={ index } value={ contract.number }>{ contract.number }</option>
						)) }
					</select>
				</div>
				<div className="form_field">
					<input
						type="text"
						name="name"
						placeholder="Ваше ФИО"
					/>
				</div>
				<div className="form_field">
					<input type="tel" name="name" placeholder="Телефон" />
				</div>
				<div className="form_field">
					<input type="email" name="name" placeholder="Email" />
				</div>
				<div className="form_field">
					<textarea placeholder="Введите текст запроса"></textarea>
				</div>
				<div className="file_upload dropzone">
					<div className="files"></div>
					<div>
						<p data-sm-text="Выберите файлы">
							<span>Перенесите файлы на экран для быстрой загрузки или выберите файл с компьютера </span>
						</p>
						<label htmlFor="" className="button button-blue">Загрузить файл</label>
					</div>
					<input type="file" accept="" />
				</div>
			</form>
		)
	}

	render() 
	{
		const { number } = this.props;
		const { loading, themes, opened_theme, opened_question } = this.state;

		const procedure = themes !== undefined && themes !== null ? themes[opened_theme].questions[opened_question] : undefined;

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta name="description" content="ЛК Эволюция автолизинга" />
				</Head>
				<Header { ...this.props } />
				<main style={{ flex: 1, display: "flex", flexDirection: "column" }}>
					<section>
						<div className="clear"></div>
						<div className="container">
							<div className="title_wrapper">
								<div className="left" style={{ alignItems: "center", flexWrap: "wrap" }}>
									<button className="back" onClick={ this._handle_onBack }>Назад</button>
									<h1 className="section_title">Новое обращение</h1>
								</div>
								<Company { ...this.props }/>
							</div>
							<div className="aside_container about">
								<article className="full">
									<div className="new_appeal">
										<div className="column">
											<div className="dropdown_blocks_list appeal_list visible">
												{ themes !== undefined && themes !== null && themes.map((theme, theme_index) => 
												(
													<React.Fragment key={ `theme_${ theme_index }` } >
														<div className={ `appeal_item dropdown_block ${ theme_index === opened_theme && "open" }` } style={ theme_index === opened_theme ? { backgroundColor: "unset"} : {} } onClick={ () => this._handle_onChangeTheme(theme_index) }>
															<div className="block_header">
																<p style={{ fontWeight: "bold" }}>{ theme.name }</p>
																<button className="rotate"></button>
															</div>
														</div>
														{ theme_index === opened_theme && theme.questions.map((question, question_index) => (
															<div key={ `question_${ question_index }` } className={ `appeal_item dropdown_block ${ question_index === opened_question && "open" }` } style={{ paddingLeft: "20px" }} onClick={ () => this.setState({ opened_question: question_index }) }>
																<div className="block_header">
																	<p>{ question.title }</p>
																	<button className="rotate"></button>
																</div>
															</div>	
														) )}
													</React.Fragment>
												)) }
											</div>
										</div>
										{ themes !== undefined && themes !== null && (
											<div className="column">
												<div className="column_text_block">
													<p><b>Процедура</b></p>
													<p dangerouslySetInnerHTML={{ __html: procedure.answer }}/>
												</div>
												{ procedure.documents !== null && (
													<div className="column_text_block">
														<p><b>Документы</b></p>
														<p dangerouslySetInnerHTML={{ __html: procedure.documents }}/>
													</div>
												) }
												{ procedure.templates !== null && (
													<div className="column_text_block">
														<p><b>Документы</b></p>
														<div className="dosc_list medium-icon">
															{ procedure.templates.map((template, index) => 
															(
																<div className="row" key={ `template_${ index }` }>
																	<p className="doc_name i-pdf extension" data-format={ template.extension }>{ template.filename }<span>Скачать шаблон</span></p>
																</div>
															)) }
														</div>
													</div>
												) }
												{ this._renderForm() }
											</div>
										) }
									</div>
								</article>
							</div>
						</div>
					</section>
				</main>
				<Footer />
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {
		contracts: state.contracts.list, 
		themes: state.support.themes, 
		appeal: state.support.appeal, 
	};
}

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

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