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 debounce from 'debounce-promise';
import { set as _set, get as _get } from 'lodash';

import { updateQuestionnaire, getAddress, getSuggests, resetQuestionnaire } from "../../../actions";

const suggestsAddressDebounce = (query) =>
{
	return getSuggests("address", { query });
}

const suggestsAddress = debounce(suggestsAddressDebounce, 200);

export default class QuestionnaireForm extends React.Component 
{
	_updateQuestionnaire = (questionnaire) => 
	{
		return new Promise((resolve, reject) => 
		{
			updateQuestionnaire({ dispatch: this.props.dispatch, questionnaire })
			.then(() => 
			{
				resolve();
			})
			.catch(() => 
			{

			});
		});
	}

	_checkStrValue = (value) => 
	{
		return value !== null ? value.toString() : "";
	}

	_getAddress = (name, text) => 
	{
		return new Promise((resolve, reject) => 
		{
			suggestsAddress(text)
			.then((result) => 
			{
				const update = {};
				update[name] = result.suggestions;
				this.setState(update, () => 
				{
					resolve(result.suggestions.map(s => ({ value: s.value, label: s.value })));
				});
			})
			.catch(() => 
			{

			});
		})
	}

	_handle_onTextFieldChange = (name, value) => 
	{
		//console.log("QuestionnaireForm", "_handle_onTextFieldChange", { name, value });

		const update = { ...this.state };
		_set(update, name, value);
		this._updateQuestionnaire(update);
	}

	_handle_onCheckboxFieldChange = (name, value) => 
	{
		console.log("QuestionnaireForm", "_handle_onCheckboxFieldChange", { name, value });

		const update = { ...this.state };
		_set(update, name, value);
		this._updateQuestionnaire(update);
	}

	_handle_onFieldChange = (name, payload) => 
	{
		console.log("_handle_onFieldChange", name, payload);

		const update = { ...this.state };
		_set(update, name, payload);

		this._updateQuestionnaire(update);
	}

	_handle_onBranchChange = (payload) => 
	{
		console.log("_handle_onBranchChange", payload);

		const update = JSON.parse(JSON.stringify(global.store.getState().questionnaire));
		for(let i in payload)
		{
			_set(update, payload[i].name, payload[i].value);
		}

		this._updateQuestionnaire(update);
	}

	_handle_onJoinChange = (payload) => 
	{
		console.log("_handle_onJoinChange", payload);
		this._updateQuestionnaire(payload);
	}

	_handle_onAddFile = (name, files) => 
	{
		console.log("QuestionnaireForm", "_handle_onAddFile", { name, files });

		const existed_files = [ ..._get(this.state, name) ];
		for(let nf in files)
		{
			let e = false;
			for(let ef in existed_files)
			{
				if(existed_files[ef].name === files[nf].name) { e = true; }
			}

			if(!e)
			{
				existed_files.push(files[nf]);
			}
		}

		const update = { ...this.state };
		_set(update, name, existed_files);

		console.log("_handle_onAddFile", "update", update);
		this._updateQuestionnaire(update);
	}

	_handle_onRemoveFile = (group, id) => 
	{
		const existed_files = [ ..._get(this.state, group) ];
		console.log("QuestionnaireForm", "_handle_onRemoveFile", { group, id, existed_files });

		const files = [];
		for(let i in existed_files)
		{
			if(existed_files[i].id !== id)
			{
				files.push(existed_files[i]);
			}
		}

		const update = { ...this.state };
		_set(update, group, files);
		console.log("_handle_onRemoveFile", "group", "files", group, files);

		this._updateQuestionnaire(update);
	}

	_handle_onReset = (event) => 
	{
		event.preventDefault();
		
		const reset = window.confirm("Вы действительно хотите отменить изменения, внесенные в анкету? Состояние анкеты будет сброшено до версии, имеющейся у ООО \"ЛК Эволюция\"");
		if(reset)
		{
			this.props.onNextStep("main");
			resetQuestionnaire({ dispatch: this.props.dispatch, id: this.props.company.questionnaire_id });
		}
	}
}