<div class="slds-dropdown slds-dropdown_fluid slds-scrollable" style="max-height:200px;min-height:40px;margin-top:0px !important" >

<lightning-tree items={emailTree} onselect={handleSelection}></lightning-tree>

</div>

/* eslint-disable vars-on-top */

connectedCallback() {
    this.getRootFolders();
}

getRootFolders() {
    getRootEmailFolders( { buId: this.buId } )
        .then(result => {
            this.emailTree = result;
            this.initialLoading = false;
            this.emailTree.forEach(folder => {
                this.emailTreeMap[folder.name] = folder;
            });
        })
        .catch(error => {
            this.error = error;
            this.initialLoading = false;
            this.errorMessage = error.body.message;
        })
}

displayEmailTree() {
    this.error = undefined;
    this.errorMessage = undefined;
    this.showEmailTree = true;
}

hideEmailTree() {
    this.showEmailTree = false;
    for (var key in this.emailTreeMap) {
        if (this.emailTreeMap[key].type === 'folder'){
            this.emailTreeMap[key].expanded = false;
        }
    }
}

expandFolder(fId) {
    getEmailFolder( { fId: fId, buId: this.buId } )
        .then(result => {
            this.emailTreeMap[fId].items = result;
            if (this.emailTreeMap[fId].items.length === 0) {
                this.emailTreeMap[fId].metatext = 'this folder is empty';
            }
            this.emailTreeMap[fId].retrieved = true;
            this.emailTreeMap[fId].items.forEach(item => {
                this.emailTreeMap[item.name] = item;
            });

            var refreshTree = Array.from(this.emailTree);
            this.emailTree = refreshTree;
        })
        .catch(error => {
            this.error = error;
            this.hideEmailTree();
            this.errorMessage = error.body.message;
        })
}

handleSelection(event) {
    var id = event.detail.name;

    if (this.emailTreeMap[id].type === 'folder') {
        this.handleExpansion(id);
    }
    else {
        this.selectedEmail = this.emailTreeMap[id];
        this.hideEmailTree();
    }
}

handleExpansion(id) {

    if (this.emailTreeMap[id].retrieved === false) {
        this.expandFolder(id);
    }

    if (this.emailTreeMap[id].expanded === false) {
        this.emailTreeMap[id].expanded = true;
    }
    else {
        this.emailTreeMap[id].expanded = false;
    }
}

clearSelection() {
    this.selectedEmail = undefined;
}