import './select-box.css';

import { El } from '../../utils/dom';
import { Stack } from '../../core/Stack';

export class SelectBox {

	/**
	* Select Box, Constructor
	*/
	constructor(target) {

		if (!target.length) {
			return;
		}

		this.target = target;

		this.labels = El('div', { class: 'labels hide' });
		this.choices = El('div', { class: 'choices' });

		this.ui = El('div', { class: 'sp-form-control sp-select-box' },
			this.choices,
			this.labels
		);

		let parent = this.target[0].dxParents('.form-field');

		this.target.forEach(function(el) {
			this.labels.append(el.parentElement);
		}, this);

		parent.append(this.ui);

		Stack.add(this);
		
		this.setEvents();
	}

	/**
	* Select Box, Set Events
	*/
	setEvents() {

		let that = this;

		this.ui.dxOn('click', function(e) {
			e.stopPropagation();
			that.labels.classList.toggle('hide');
		});

		window.dxOn('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey, function() {
			that.labels.classList.add('hide');
		});

		document.dxOn('click.selectbox' + this.ekey, function() {
			that.labels.classList.add('hide');
		});

		this.labels.dxOn('click', function(e) {
			e.stopPropagation();
		});

		this.labels.dxOn('change', 'input', this.update.bind(this) );
	}

	/**
	* Select Box, Update
	*/
	update() {

		let checked = [];

		this.labels.dxFind('input', input => {

			if (input.checked) {
				checked.push(input.parentElement.textContent);
			}
		});

		this.choices.dxText(checked.join(', '));
	}

	/**
	* Select Box, Destroy
	*/
	destroy() {
		
		window.dxOff('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey);
		document.dxOff('click.selectbox' + this.ekey);
		
		Stack.delete(this);
	}
}