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 } from "../../../actions";

const suggestsAddressDebounce = (text) =>
{
	return getAddress(text);
}

const suggestsAddress = debounce(suggestsAddressDebounce, 200);

/*
const getAddress = (inputValue) => {
	return 
	new Promise<ColourOption[]>((resolve) => {
		setTimeout(() => {
		  resolve(filterColors(inputValue));
		}, 1000);
	});
}
*/

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

			});
		});
	}

	_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_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 = (name, file_name) => 
	{
		console.log("QuestionnaireForm", "_handle_onAdd", { name, files });

		const existed_files = [ ..._get(this.state, name) ];

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

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

		this._updateQuestionnaire(update);
	}
}