select

select.js

import CollectionView from 'base/collection-view';
import ControlMixin from '../mixin';
import factory from 'components/values/factory';
import UiItem from 'components/ui-item';
import Selector from './selector';
import Control from 'components/controls/control';


const childView = UiItem.extend({
	constructor(){
		UiItem.apply(this, arguments);
		this.on('select', () => this._setSelected(true));
		this.on('unselect', () => this._setSelected(false));
	},
	_setSelected(val){
		this._selected = val;
		this.refreshCssClass();
	},
	cssClassModifiers:[
		'whole-btn selectable-item', 
		(m,v) => v._selected ? 'selected' : ''
	],
	selectButton: true,
	onTextClick(model,view, event){
		this.trigger('toggle', this, event);
	},
	onSelectClick(model,view, event){
		this.trigger('toggle', this, event);
	},
	//textAction: 'select'
});


function sourceValuesToCollection(values, cfg){
	return factory.collection(values, cfg);
}

const SelectView = Control.extend({
	initialize(opts = {}){
		this.valueConfig = this.getOption('valueConfig') || {};
		// this.mergeOptions(opts, ['valueConfig']);
		// !this.valueConfig && (this.valueConfig = {});
		// this.multiple = this.valueConfig.multiple === true;

		this.initializeCollection();
		this.initializeSelector();

	},
	initializeCollection(){
		if(!this.collection && this.valueConfig && this.valueConfig.sourceValues){
			let values = _.result(this.valueConfig,'sourceValues');
			this.collection = sourceValuesToCollection(values, this.valueConfig);
		}
	},
	initializeSelector(){
		this.selector = new Selector({
			collection: this.collection,
			multiple: this.valueConfig.multiple,
			children: () => this.children,
			initialValue: this.getOption('value')
		});
		this.listenTo(this.selector, 'change', this._onSelectChange);
	},
	_onSelectChange(){
		let value = this.getSelectorValue();
		this.setControlValue(value);
		// this.triggerControlChange();
		// if(!this.multiple)
		// 	this.triggerControlDone();
	},
	getSelectorValue(){
		let value = this.selector.getValue();
		if(!_.isArray(value)){
			return value.getValue();
		} else {
			return _.each(value, model => model.getValue());
		}
	},
	childViewEvents:{
		'toggle'(item, event){
			this.selector.clicked(item, { event });
		}
	},
	// getControlValue(){
	// },
	onRender(){
		this.selector.selectInitialValues();
	},
	childView
});

export default SelectView;