import template from 'lodash.template';
import Events from '../../assets/js/Events';
import Button from '../../atoms/button/Button';
import className from '../../assets/js/className';
import validationMessage from '../../assets/js/validationMessage';
import request from '../../assets/js/request';

export default class Form {
	constructor(element, i18n = null) {
		this.element = element;
		this.submit = new Button(this.element.querySelector('button[type="submit"]'));
		this.error = this.element.querySelector('[data-form-error]');
		this.success = this.element.querySelector('[data-form-success]');
		this.events = new Events();

		if (this.success) {
			const tpl = document.getElementById(this.success.getAttribute('data-form-success'));
			this.successMessage = (tpl) ? tpl.innerHTML : '';
		}

		this.validation = this.element.querySelector('meta[name="form-validation"]');
		this.i18n = i18n;

		if (!this.i18n) {
			this.i18n = (str) => str;
		}

		this.data = {};
		this.errors = {};
		this.validationRules = null;

		if (this.validation) {
			this.parseValidationRules();
		}

		this.collectInputs();
		this.attach();
	}

	collectInputs() {
		this.inputs = this.element.querySelectorAll('input');
	}

	parseValidationRules() {
		const validationsStr = this.validation.getAttribute('content');
		const validations = validationsStr.split('|');

		if (!validations.length) {
			return;
		}

		this.validationRules = {};

		validations.forEach((validation) => {
			const [name, rulesStr] = validation.split('=');

			this.validationRules[name] = rulesStr.split(',');
		});
	}

	attach() {
		this.element.addEventListener('submit', this.onSubmit);
		this.element.addEventListener('reset', this.reset);
	}

	updateData() {
		const data = { ...this.data };

		this.collectInputs();
		this.inputs.forEach((input) => {
			const name = input.getAttribute('name');
			const { value } = input;
			const type = input.getAttribute('type');

			if ((type === 'radio' && input.checked) || (type === 'checkbox' && input.checked) || (type !== 'checkbox' && type !== 'radio' && value && value.length)) {
				data[name] = value;
			} else if (type === 'checkbox' && !input.checked) {
				delete data[name];
			}
		});

		this.data = data;
	}

	validateRule(value, rule, field) {
		const [ruleName, ruleData] = rule.split(':');

		switch (ruleName) {
			case 'required': {
				return field in this.data;
			}
			case 'min': {
				return !value || value.length >= parseInt(ruleData, 10);
			}
			default: {
				return true;
			}
		}
	}

	validate() {
		this.errors = {};

		if (!this.validationRules) {
			return true;
		}

		Object.entries(this.validationRules).forEach(([field, rules]) => {
			rules.forEach((rule) => {
				if (!this.validateRule(this.data[field], rule, field)) {
					if (!(field in this.errors)) {
						this.errors[field] = [];
					}

					this.errors[field].push(rule);
				}
			});
		});

		return Object.keys(this.errors).length < 1;
	}

	onSubmit = (e) => {
		e.preventDefault();

		this.updateData();
		this.clearFieldErrors();

		if (this.validate()) {
			this.send();
		} else {
			this.displayError({ message: this.i18n('Alla fält måste vara ifyllda') });
		}
	};

	setLoading(loading) {
		if (loading) {
			this.inputs.forEach((input) => { input.disabled = true; });
			this.submit.start();
			this.element.classList.add('is-loading');
		} else {
			this.inputs.forEach((input) => { input.disabled = false; });
			this.submit.stop();
			this.element.classList.remove('is-loading');
		}
	}

	displayError = (error) => {
		this.events.emit('error', error);
		this.setLoading(false);

		if ('response' in error) {
			const { response } = error;

			if ('data' in response && response.data && response.data.errors) {
				this.errors = response.data.errors;
			}
		}

		if (Object.keys(this.errors).length) {
			Object.entries(this.errors).forEach(this.displayFieldError);

			return;
		}

		const message = ('response' in error) ? error.response.message : error.statusText;

		this.error.classList.remove('is-hidden');
		this.error.innerHTML = message || this.i18n('Något gick fel');
	};

	displayFieldError = ([name, error]) => {
		const input = this.element.querySelector(`[name="${name}"]`);

		if (!input) {
			return;
		}

		let id = input.getAttribute('aria-describedby');

		if (!id) {
			id = `${name}-help`;
			input.setAttribute('aria-describedby', id);
		}

		let help = document.getElementById(id);

		if (!help) {
			help = document.createElement('div');
			help.id = id;
			help.className = className('input-help');

			const fieldGroup = input.closest('[class*="field-group"]');

			if (fieldGroup) {
				fieldGroup.appendChild(help);
			}
		}

		help.innerHTML = error.map(validationMessage).join('<br>');

		const fieldGroup = input.closest('[class*="field-group"]');

		if (fieldGroup) {
			fieldGroup.classList.add('is-invalid');
		}
	};

	clearFieldErrors() {
		this.inputs.forEach((input) => {
			let id = input.getAttribute('aria-describedby');

			if (!id) {
				id = `${input.getAttribute('name')}-help`;
				input.setAttribute('aria-describedby', id);
			}

			const help = document.getElementById(id);

			if (help) {
				help.innerHTML = '';
			}

			const fieldGroup = input.closest('[class*="field-group"]');

			if (fieldGroup) {
				fieldGroup.classList.remove('is-invalid');
			}
		});
	}

	hideMessages() {
		this.success.classList.add('is-hidden');
		this.error.classList.add('is-hidden');
	}

	send() {
		this.hideMessages();
		this.setLoading(true);

		const data = { ...this.data };
		const method = this.element.getAttribute('method').toUpperCase() || 'POST';
		const url = this.element.getAttribute('data-form');

		if (this.token) {
			data.token = this.token;
		}

		request(url, data, method)
			.then(this.onSuccess)
			.catch(this.displayError);
	}

	onSuccess = (json) => {
		this.setLoading(false);

		const tmpl = template(this.successMessage);

		this.success.classList.remove('is-hidden');
		this.success.innerHTML = tmpl(json);

		this.events.emit('success', json);
	};

	reset = () => {
		this.element.reset();
		this.hideMessages();

		this.success.innerHTML = '';
		this.error.innerHTML = '';
	};
}