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

import QuestionnaireForm from "../QuestionnaireForm";
import { reduxWrapper } from '../../../../store';
import DigitalSignaturesList from "../DigitalSignaturesList";
import { downloadQuestionnaire, uploadSignedFile } from "../../../../actions";

class Form_9_Status extends QuestionnaireForm 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			sign: {}, 
			uploading: false, 
			file: null, 
			sent: null, 
			company: {}, 
		};

		this.ref_file_input = React.createRef();
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			sign: nextProps.questionnaire.sign, 
			step: nextProps.questionnaire.step, 
			company: nextProps.company, 
		};
	}

	componentDidMount() 
	{		
	}

	_handle_onFileUpload = () => 
	{
		console.log("_handle_onFileUpload");
		console.log(this.ref_file_input);

		this.ref_file_input.current.click();
	}

	_handle_onFileChange = (event) => 
	{
		console.log("_handle_onFileChange");
		console.log(event);
		console.log("file", file);

		const file = event.target.files[0];
		this.setState({ file: file });
	}

	_handle_onSend = () => 
	{
		const { file, company, uploading } = this.state;
		console.log("company", company);

		if(!uploading)
		{
			this.setState({ uploading: true }, () => 
			{
				uploadSignedFile(file, company.questionnaire_id)
				.then(() => 
				{
					this.setState({ uploading: false, sent: true }, () => 
					{
						this.props.onSuccess();
					});
				})
				.catch(() => 
				{
					this.setState({ uploading: false, sent: false });
				});
			});
		}
	}

	render() 
	{
		const { sign, file, uploading, sent } = this.state;
		console.log( {sign} );

		return (
			<React.Fragment>
				{ sign.digital && (
					<React.Fragment>
						<div className="questionnaire message success">
							<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M22 38.5C31.1127 38.5 38.5 31.1127 38.5 22C38.5 12.8873 31.1127 5.5 22 5.5C12.8873 5.5 5.5 12.8873 5.5 22C5.5 31.1127 12.8873 38.5 22 38.5Z" fill="white"/>
								<path d="M29.5625 17.875L19.4791 27.5L14.4375 22.6875" stroke="#5FB158" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
							</svg>
							<p>
								<b>Анкета заполнена и подписана</b>
								Вы заполнили и подписали анкету лизингополучателя посредством 
								ЭЦП. Анкета передана в обрабатывающий центр. Если у 
								сотрудников возникнут вопросы мы свяжемся с Вами. Спасибо!
							</p>
						</div>
						<div className="questionnaire status_action">
							<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ () => this.props.router.push("/") }>Перейти на главную страницу </button>
						</div>
					</React.Fragment>
				) }
				{ sign.print && (
					<React.Fragment>
						{ file === null ? (
							<React.Fragment>
								<div className="questionnaire message moderate">
									<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M22 38.5C31.1127 38.5 38.5 31.1127 38.5 22C38.5 12.8873 31.1127 5.5 22 5.5C12.8873 5.5 5.5 12.8873 5.5 22C5.5 31.1127 12.8873 38.5 22 38.5Z" fill="white"/>
										<path d="M23.0322 14.699L28.301 19.9678L29.0537 22.9785L25.2903 26.7419M14.0478 23.779L19.221 28.9522M18.957 29H14.7527C14.5531 29 14.3616 28.9207 14.2205 28.7795C14.0793 28.6384 14 28.4469 14 28.2473V24.043C14 23.9441 14.0195 23.8463 14.0573 23.7549C14.0951 23.6636 14.1506 23.5806 14.2205 23.5107L25.5107 12.2205C25.6519 12.0793 25.8433 12 26.043 12C26.2426 12 26.434 12.0793 26.5752 12.2205L30.7795 16.4248C30.9207 16.566 31 16.7574 31 16.957C31 17.1567 30.9207 17.3481 30.7795 17.4893L19.4893 28.7795C19.4194 28.8494 19.3364 28.9049 19.2451 28.9427C19.1537 28.9805 19.0559 29 18.957 29Z" stroke="#8E94A7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
									</svg>
									<p>
										<b>Анкета заполнена и ожидает вашего подписания</b>
										Вы заполнили анкету лизингополучателя для подписания в режиме загрузки скана анкеты. Пожалуйста, загрузите скан подписанной анкеты.
									</p>
								</div>
								<div className="questionnaire status_action">
									<>
										<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ this._handle_onFileUpload }>Загрузить подписанный документ</button>
										<input type="file" id="file" multiple={ false } ref={ this.ref_file_input } style={{ display: "none" }} onChange={ this._handle_onFileChange }/>
									</>
								</div>
							</React.Fragment>
						) : (
							<React.Fragment>
								{ !sent ? (
									<React.Fragment>
										<div className="questionnaire message moderate">
											<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M22 38.5C31.1127 38.5 38.5 31.1127 38.5 22C38.5 12.8873 31.1127 5.5 22 5.5C12.8873 5.5 5.5 12.8873 5.5 22C5.5 31.1127 12.8873 38.5 22 38.5Z" fill="white"/>
												<path d="M23.0322 14.699L28.301 19.9678L29.0537 22.9785L25.2903 26.7419M14.0478 23.779L19.221 28.9522M18.957 29H14.7527C14.5531 29 14.3616 28.9207 14.2205 28.7795C14.0793 28.6384 14 28.4469 14 28.2473V24.043C14 23.9441 14.0195 23.8463 14.0573 23.7549C14.0951 23.6636 14.1506 23.5806 14.2205 23.5107L25.5107 12.2205C25.6519 12.0793 25.8433 12 26.043 12C26.2426 12 26.434 12.0793 26.5752 12.2205L30.7795 16.4248C30.9207 16.566 31 16.7574 31 16.957C31 17.1567 30.9207 17.3481 30.7795 17.4893L19.4893 28.7795C19.4194 28.8494 19.3364 28.9049 19.2451 28.9427C19.1537 28.9805 19.0559 29 18.957 29Z" stroke="#8E94A7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
											</svg>
											<p>
												<b>Анкета заполнена, подписана и ожидает отправки</b>
												Вы заполнили и подписали анкету лизингополучателя в режиме загрузки скана анкеты. Пожалуйста, отправьте подписанный документ.
											</p>
										</div>
										<div className="questionnaire status_action" style={{ width: "100%" }}>
											<div className="dosc_list medium-icon">
												<div className="row">
													<p className="doc_name i-pdf extension">
														{ file.name }
														<span style={{width: "100%"}}>Подписанный скан анкеты</span>
													</p>
													<button className="button button-blue" style={{ width: "130px" }} onClick={ this._handle_onSend }>
														{ uploading ? (
															<SpinnerCircular size={ 24 } thickness={ 50 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
														) : "Отправить" }
													</button>
												</div>
											</div>
										</div>
									</React.Fragment>
								) : (
									<React.Fragment>
										<div className="questionnaire message success">
											<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M22 38.5C31.1127 38.5 38.5 31.1127 38.5 22C38.5 12.8873 31.1127 5.5 22 5.5C12.8873 5.5 5.5 12.8873 5.5 22C5.5 31.1127 12.8873 38.5 22 38.5Z" fill="white"/>
												<path d="M29.5625 17.875L19.4791 27.5L14.4375 22.6875" stroke="#5FB158" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
											</svg>
											<p>
												<b>Анкета заполнена и подписана</b>
												Вы заполнили и подписали анкету лизингополучателя посредством
												загрузки скана анкеты. Анкета передана в обрабатывающий центр.
												Если у сотрудников возникнут вопросы мы свяжемся с Вами.
												Спасибо!
											</p>
										</div>
										<div className="questionnaire status_action">
											<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ () => this.props.router.push("/") }>Перейти на главную страницу </button>
										</div>
									</React.Fragment>
								) }
							</React.Fragment>
						)}
					</React.Fragment>
				) }
			</React.Fragment>
		);
	}
}

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

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

export default connect(mapStateToProps)(Form_9_Status);