// `
class SimpleSelectedContainer {
    constructor($container, data) {
        this.$self = $container;
        this.elements_id = []; // [spec_id, spec_id, ...]
        this.data = data;
        this.$input = this.$self.find('input[type="hidden"]');
        this.restoreElements();
    }

    restoreElements() {
        const self = this;
        if (this.$input && this.$input.val()){
            let data = this.$input.val().split(',').filter((el) => el);
            console.log("restore data = ", data);
            this.elements_id = [];
            data.forEach((el) => self.add(el));
        }
    }

    static getTemplate(name, id) {
        let htmlTemplate =
            `
            <div class="selected-element max-width">
                <div class="name">
                    ${name}
                </div>
                <span data-id="${id}" class="icon-remove"></span>
            </div>
`;
        return htmlTemplate
    }


    _removeById(spec_id) {
        let index = this.elements_id.indexOf(spec_id);
        if (index >= 0) {
            this.elements_id.splice(index, 1);
        }
        $(`span[data-id='${spec_id}']`).parents('.selected-element').remove();
    }

    remove(e) {
        let spec_id = $(e.target).data("id");
        this._removeById(spec_id);
        if (this.$input) this.$input.val(this.elements_id.join(','));
        e.preventDefault();
    }

    getElementById(id) {
        for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].id == id) return this.data[i]
        }
    }

    add(_id, max_len) {
        const id = Number(_id);
        // TODO: добавить учет max_len
        let self = this;
        if ((this.elements_id).indexOf(id) != -1) {
            //TODO: do popup messages
            console.log("Not actually");
            return;
        }
        // console.log("!", this.getElementById(id));
        const name = this.getElementById(id).name;
        this.elements_id.push(id);
        if (this.$input) this.$input.val(this.elements_id.join(','));
        this.$self.append(SimpleSelectedContainer.getTemplate(name, id));
        this.btn_remove = this.$self.find('.icon-remove');
        this.btn_remove.on("click", this.remove.bind(self));
        console.log();
    }
}