'use strict';

/* jshint undef: true, unused: true */
/* globals m */

window.component('tagselector', function(tagselector) {
    var t = window.components.t;
	
    tagselector.controller = function(opts){
        if (!(this instanceof tagselector.controller)) {
            return new tagselector.controller(opts);
        }

        this.opts = opts;
        this.placeholder = m.prop(opts.placeholder || 'Nothing to select from ...');
        this.searchPlaceholder = m.prop(opts.searchPlaceholder || 'Type to search ...');
        this.options = m.prop(opts.options.map(window.components.selector.Option));
        this.selected = this.options().filter.bind(this.options(), function(o){ return o.selected(); });
        this.searched = this.options().filter.bind(this.options(), function(o){ 
            return !o.selected() && (('' + o.value()).toLowerCase().indexOf(this.search().toLowerCase()) !== -1 || ('' + (o.title() || '')).toLowerCase().indexOf(this.search().toLowerCase()) !== -1); 
        }.bind(this));

        this.search = m.prop('');

        this.toggle = function(value){
            this.options().forEach(function(o){
                if (('' + o.value()) === value) {
                    if (!o.selected()) { this.search(''); }
                    o.selected(!o.selected());
                    if (opts.onchange) { opts.onchange(this.selected()); }
                }
            }.bind(this));
        }.bind(this);

        this.onsearch = function(ev) {
            // debugger
            if (typeof ev === 'string') {
                this.search(ev);
            } else {
                if (ev.keyCode === 13 && this.searched().length === 1) {
                    this.toggle(this.searched()[0].value());
                    this.search('');
                    return false;
                } else if (ev.keyCode === 27) {
                    this.search('');
                    return false;
                } else {
                    return true;
                }
            }
        }.bind(this);
    };
    tagselector.view = function(ctrl){
        return m('.comp-tagselector' + (ctrl.opts.class ? '.' + ctrl.opts.class : ''), [
            m('.comp-tagselector-selected', ctrl.selected().map(function(o){
                return m('.comp-tagselector-option.selected', [
                    o.title(),
                    m('span.ion-close', {'data-value': o.value(), onclick: m.withAttr('data-value', ctrl.toggle)})
                ]);
            }).concat([m('input.comp-tagselector-search', {placeholder: ctrl.searchPlaceholder(), key: 'comp-tagselector-search', oninput: m.withAttr('value', ctrl.onsearch), onkeydown: ctrl.onsearch, value: ctrl.search()})])),

            m('.comp-tagselector-options', 
                m('div', m('div', ctrl.searched().map(function(o){
                    return m('.comp-tagselector-option', {'data-value': o.value(), onclick: m.withAttr('data-value', ctrl.toggle)}, o.title());
                })))
            )
        ]);
    };
});

