var Icon = require('./__icon/dropdown__icon.js');
var DropdownBubble = require('./__bubble/dropdown__bubble.js');
var DropdownInput = require('./__input/dropdown__input.js');
var DropdownSearch = require('./__search/dropdown__search.js');
var DropdownResult = require('./__result/dropdown__result.js');
var DropdownList = require('./__list/dropdown__list.js');
var DropdownItem = require('./__item/dropdown__item.js');
var DropdownText = require('./__text/dropdown__text.js');
var utils = require('../utils.js');
var filter = require('./filter.js');

function Block(data) {
    var toggle = (new Icon({
        mods: {
            type: 'arrow-downs'
        }
    }));

    data.mods = utils.getModsFromDomElem(data.domElem);

    this.channel = new utils.MicroEvent();
    this.domElem = data.domElem;
    this.domElem.ctx = this;

    this.domElem.className = 'dropdown';
    utils.addBemFunction(this.domElem, data);

    this.setMod('open', 'no');
    this.setMod('select', 'no');

    this.bubbleAdd = (data.mods.multi === 'yes') && new DropdownBubble({ mods: { type: 'add' } }, this.channel);
    this.input = new DropdownInput(this.channel);
    this.dropdownSearch = new DropdownSearch({
        content: [
            toggle,
            this.bubbleAdd,
            data.mods.complete && this.input
        ]
    }, this.channel);
    this.dropdownResult = new DropdownResult({
        mods: {
            hide: 'yes'
        },
        content: [
            new DropdownText({ content: 'Пользователь не найден', mods: { type: 'empty' } }),
            new DropdownList({
                content: data.list.map(function (item) {
                    return new DropdownItem(item, this.channel, data.mods.avatar);
                }.bind(this))
            })
        ]
    });
    this.dropdownResult.ctx.setMod('empty', 'no');

    this.selected = {};

    this.setContent([
        this.dropdownSearch,
        this.dropdownResult
    ]);
    window.Event.add(this.dropdownSearch, 'click', _onClickToggle.bind(this));
    window.Event.add(toggle, 'click', _onClickToggle.bind(this));

    window.Event.add(document, 'click', function () {
        this.setMod('open', 'no');
    }.bind(this));

    window.Event.add(this.input, 'click', function (e) {
        e.stopPropagation();
        this.setMod('open', 'yes');
    }.bind(this));

    window.Event.add(this.input, 'focus', function () {
        this.setMod('open', 'yes');
    }.bind(this));

    this.channel.bind('clickBubble_add', _onToggle.bind(this));
    this.channel.bind('clickItem', _onClickListItem.bind(this));
    this.channel.bind('clickBubble_simple', _onClickUserBubble.bind(this));
    this.channel.bind('changeInput', function (ctx) {
        filter.find(ctx.domElem.value, data.list, data.remoteComplete, function (idArr) {
            this.channel.trigger('showOnlyItems', idArr);
        }.bind(this));
    }.bind(this));

    return this.domElem;
}

function _onClickToggle(e) {
    e.stopPropagation();
    _onToggle.call(this);
}

function _onToggle() {
    if (this.mods.open === 'yes') {
        this.setMod('open', 'no');
    } else {
        this.setMod('open', 'yes');
        this.input.focus();
    }
}

function _onClickListItem(itemCtx) {
    var data = itemCtx.data;

    this.setMod('open', 'no');
    this.setMod('select', 'yes');

    if (!this.selected[data.id]) {
        itemCtx.setMod('select', 'yes');
        data.item = itemCtx.domElem;
        _createNewBubble.call(this, data);
    }
}

function _createNewBubble(data) {
    this.selected[data.id] = true;

    if (Object.keys(this.selected).length === this.data.list.length) {
        this.dropdownResult.ctx.setMod('empty', 'yes');
    }

    if (this.bubbleAdd) {
        this.dropdownSearch.ctx.selectMulti(data);
    }

    if (!this.bubbleAdd) {
        this.dropdownSearch.ctx.selectOne(data);
    }
}

function _onClickUserBubble(bubbleCtx) {
    var data = bubbleCtx.data.data;

    delete this.selected[data.id];
    data.item.ctx.setMod('select', 'no');
    this.dropdownResult.ctx.setMod('empty', 'no');

    if (Object.keys(this.selected).length === 0) {
        this.setMod('select', 'no');
    }

    bubbleCtx.remove();
    bubbleCtx.domElem = null;
    bubbleCtx = null;
}

module.exports = Block;
