/* Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header */
import { LightningElement, track, api } from 'lwc';
import lexHandCss from '@salesforce/resourceUrl/lexHandCss';
import {loadStyle} from 'lightning/platformResourceLoader';
export default class MultiSelectCombobox extends LightningElement {
    
    @api options;
    @api selectedValue;
    @api selectedValues = [];
    @api label;
    @api minChar = 1;
    @api disabled = false;
    @api multiSelect = false;
    @api myValue;
    @api required;
    @track value;
    @track values = [];
    @track optionData;
    @api searchString;
    @track message;
    @track showDropdown = false;
    @api placeholder = '--无--';
    @track errorFlag = false;
    connectedCallback() {
        Promise.all([
            loadStyle(this, lexHandCss)
           ]);
        this.showDropdown = false;
        var optionData = this.options ? (JSON.parse(JSON.stringify(this.options))) : null;
        var value = this.selectedValue ? (JSON.parse(JSON.stringify(this.selectedValue))) : null;
        var values = this.selectedValues ? (JSON.parse(JSON.stringify(this.selectedValues))) : null;
		if(value || values) {
            var searchString;
        	var count = 0;
            for(var i = 0; i < optionData.length; i++) {
                if(this.multiSelect) {
                    if(values.includes(optionData[i].value)) {
                        optionData[i].selected = true;
                        count++;
                    }  
                } else {
                    if(optionData[i].value == value) {
                        searchString = optionData[i].label;
                    }
                }
            }
            if(this.multiSelect)
                this.searchString = count + ' Option(s) Selected';
            else
                this.searchString = searchString;
        }
        this.value = value;
        this.values = values;
        this.optionData = optionData;
    }

    get isRequired() {
        return this.required;
    }
    closeAction(){
        this.showDropdown = false;
    }
    handlePayModeOpen() {
        setTimeout(() => {
            const topDiv = this.template.querySelector('[data-id="scrollSec"]');
            topDiv.scrollTop = topDiv.scrollHeight;
        }, 20);
    }

    filterOptions(event) {
        this.searchString = event.target.value;
        if( this.searchString && this.searchString.length > 0 ) {
            this.message = '';
            if(this.searchString.length >= this.minChar) {
                var flag = true;
                for(var i = 0; i < this.optionData.length; i++) {
                    if(this.optionData[i].label.toLowerCase().trim().includes(this.searchString.toLowerCase().trim())) {
                        this.optionData[i].isVisible = true;
                        flag = false;
                    } else {
                        this.optionData[i].isVisible = false;
                    }
                }
                if(flag) {
                    this.message = "No results found for '" + this.searchString + "'";
                }
            }
            this.showDropdown = true;
        } else {
            this.showDropdown = false;
        }
	}
    @api refreshOptions(options) {
        if(options && options.length > 0)
            this.optionData = JSON.parse(JSON.stringify(options));
    }

    selectItem(event) {
        var selectedVal = event.currentTarget.dataset.id;
        this.myValue = selectedVal;
        if(selectedVal) {
            var count = 0;
            var options = JSON.parse(JSON.stringify(this.optionData));
            for(var i = 0; i < options.length; i++) {
                if(options[i].value === selectedVal) {
                    if(this.multiSelect) {
                        if(this.values.includes(options[i].value)) {
                            this.values.splice(this.values.indexOf(options[i].value), 1);
                        } else {
                            this.values.push(options[i].value);
                        }
                        options[i].selected = options[i].selected ? false : true;   
                    } else {
                        this.value = options[i].value;
                        this.searchString = options[i].label;
                    }
                }
                if(options[i].selected) {
                    count++;
                }
            }
            this.optionData = options;
            if(this.multiSelect)
                this.searchString = count + ' Option(s) Selected';
            if(this.multiSelect)
                event.preventDefault();
            else
                this.showDropdown = false;
                this.dispatchEvent(new CustomEvent('select', {
                    detail: {
                        'payloadType' : 'multi-select',
                        'payload' : {
                            'value' : this.value,
                            'values' : this.values
                        }
                    }
                }));
        }
    }

    dontClose(event){
        event.preventDefault();
    }

    showOptions() {
        if(this.disabled == false && this.options) {
            this.message = '';
            this.searchString = '';
            var options = JSON.parse(JSON.stringify(this.optionData));
            for(var i = 0; i < options.length; i++) {
                options[i].isVisible = true;
            }
            if(options.length > 0) {
                this.showDropdown = true;
            }
            this.optionData = options;
        }
	}

    removePill(event) {
        var value = event.currentTarget.name;
        var count = 0;
        var options = JSON.parse(JSON.stringify(this.optionData));
        for(var i = 0; i < options.length; i++) {
            if(options[i].value === value) {
                options[i].selected = false;
                this.values.splice(this.values.indexOf(options[i].value), 1);
            }
            if(options[i].selected) {
                count++;
            }
        }
        this.optionData = options;
        if(this.multiSelect)
            this.searchString = count + ' Option(s) Selected';
    }

    blurEvent() {
        var previousLabel;
        var count = 0;
        for(var i = 0; i < this.optionData.length; i++) {
            if(this.optionData[i].value === this.value) {
                previousLabel = this.optionData[i].label;
            }
            if(this.optionData[i].selected) {
                count++;
            }
        }
        if(!previousLabel){
            var element = this.template.querySelector('[data-id="myinput"]');
            element.classList.add('slds-has-error');
            this.errorFlag = true;
            this.showDropdown = false;
        }else{
            var element = this.template.querySelector('[data-id="myinput"]');
            element.classList.remove('slds-has-error');
            this.errorFlag = false;
            this.showDropdown = false;
        }
        if(this.multiSelect)
        	this.searchString = count + ' Option(s) Selected';
        else
        	this.searchString = previousLabel;
        
        this.showDropdown = false;

        
    }
}
/* 
    Code by CafeForce 
    Website: http://www.cafeforce.com 
    DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE 
*/