// `
class SelectedContainer {
    constructor($container, data) {
        this.$self = $container;
        this.elements_id = []; // [spec_id, spec_id, ...]
        this.tree_data = new SpecTree(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(header, name, id) {
        let htmlTemplate =
            `
            <div class="selected-element">
                <div class="header">
                    ${header}
                </div>
                <div class="name">
                    ${name}
                </div>
                <span data-id="${id}" class="icon-remove"></span>
            </div>
`;
        return htmlTemplate
    }

    static getHeader(spec_chain, separator, max_len) {
        function toShortString(string, max_len) {
            return string.slice(0, max_len) + (string.length > max_len ? "..." : "");
        }

        separator = separator || ' / ';
        let str_chain = "";

        spec_chain.forEach(function (el) {
            str_chain = (max_len ? toShortString(el.name, max_len) : el.name) + (str_chain ? separator : "") + str_chain;
        });

        return str_chain;
    }

    _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();
    }

    add(_id, max_len) {
        const id = Number(_id);
        let self = this;

        let has_already = this.elements_id.filter(function (el) {
            return self.tree_data.hasChildren(el, id)
        });

        // console.log(has_already);
        if (has_already.length || (this.elements_id).indexOf(Number(id)) != -1) {
            //TODO: do popup messages
            console.log("Not actually");
            return;
        }

        let not_valid = this.elements_id.filter(function (el) {
            return self.tree_data.hasChildren(id, el)
        });

        not_valid.forEach(function (el) {
           self._removeById(el);
        });

        const header = SelectedContainer.getHeader(this.tree_data.getSpecChain(id), "", max_len);
        // console.log("header = ", header);
        const name = this.tree_data.getElementById(id).name;
        this.elements_id.push(id);
        if (this.$input) this.$input.val(this.elements_id.join(','));
        this.$self.append(SelectedContainer.getTemplate(header || "root", name, id));
        this.btn_remove = this.$self.find('.icon-remove');
        this.btn_remove.on("click", this.remove.bind(self));
    }
}