/*
 * @Description: 
 * @version: 
 * @Author: chen jing wu
 * @Date: 2023-04-28 17:41:48
 * @LastEditors: chen jing wu
 * @LastEditTime: 2023-04-28 17:50:29
 */
import { api, LightningElement, track } from 'lwc';
import lexmultiSelectComboboxItem from 'c/lexmultiSelectComboboxItem';
export default class LexmultiSelectCombobox extends LightningElement {
/**
* If present, the combobox is disabled and users cannot interact with it.
* @type {boolean}
* @default false
*/
@api disabled = false;

/**
* Text label for the combobox.
* @type {string}
* @default ''
*/
@api label = '';
/**
* Specifies the name of the combobox.
* @type {string}
*/
@api name;
/**
* A list of options that are available for selection. Each option has the following attributes: label and value.
* @type {Array}
* @example
* options = [
*   {
*     "label": "Option 1",
*     "value": "option1"
*   },
*   {
*     "label": "Option 2",
*     "value": "option2"
*   },
* ]
*/
@api options = [];
/**
* Text that is displayed before an option is selected, to prompt the user to select an option.
* @type {string}
* @default 'Select an Option'
*/
@api placeholder = 'Select an Option';
/**
* If present, the combobox is read-only. A read-only combobox is also disabled.
* @type {boolean}
* @default false
*/
@api readOnly = false;
/**
* If present, a value must be selected before a form can be submitted.
* @type {boolean}
* @default false
*/
@api required = false;
/**
* If present, the combobox only allows the selection of a single value.
* @type {boolean}
* @default false
*/
@api singleSelect = false;
/**
* If present, the combobox will show a pill container with the currently selected options.
* @type {boolean}
* @default false
*/
@api showPills = false;
@track currentOptions = [];
selectedItems = [];
selectedOptions = [];
isInitialized = false;
isLoaded = false;
isVisible = false;
isDisabled = false;
connectedCallback() {
 this.isDisabled = this.disabled || this.readOnly;
 this.hasPillsEnabled = this.showPills && !this.singleSelect;
}
renderedCallback() {
 if (!this.isInitialized) {
   this.template.querySelector('.multi-select-combobox__input').addEventListener('click', (event) => {
     this.handleClick(event.target);
     event.stopPropagation();
   });
   this.template.addEventListener('click', (event) => {
     event.stopPropagation();
   });
   document.addEventListener('click', () => {
     this.close();
   });
   this.isInitialized = true;
   this.setSelection();
 }
}
handleChange(event) {
 this.change(event);
}
handleRemove(event) {
 this.selectedOptions.splice(event.detail.index, 1);
 this.change(event);
}
handleClick() {
 // initialize picklist options on first click to make them editable
 if (this.isLoaded === false) {
   this.currentOptions = JSON.parse(JSON.stringify(this.options));
   this.isLoaded = true;
 }
 if (this.template.querySelector('.slds-is-open')) {
   this.close();
 } else {
   this.template.querySelectorAll('.multi-select-combobox__dropdown').forEach((node) => {
     node.classList.add('slds-is-open');
   });
 }
}
change(event) {
 // remove previous selection for single select picklist
 if (this.singleSelect) {
   this.currentOptions.forEach((item) => (item.selected = false));
 }
 // set selected items
 this.currentOptions
   .filter((item) => item.value === event.detail.item.value)
   .forEach((item) => (item.selected = event.detail.selected));
 this.setSelection();
 const selection = this.getSelectedItems();
 this.dispatchEvent(new CustomEvent('change', { detail: this.singleSelect ? selection[0] : selection }));
 // for single select picklist close dropdown after selection is made
 if (this.singleSelect) {
   this.close();
 }
}
close() {
 this.template.querySelectorAll('.multi-select-combobox__dropdown').forEach((node) => {
   node.classList.remove('slds-is-open');
 });
 this.dispatchEvent(new CustomEvent('close'));
}
setSelection() {
 const selectedItems = this.getSelectedItems();
 let selection = '';
 if (selectedItems.length < 1) {
   selection = this.placeholder;
   this.selectedOptions = [];
 } else if (selectedItems.length > 2) {
   selection = `${selectedItems.length} Options Selected`;
   this.selectedOptions = this.getSelectedItems();
 } else {
   selection = selectedItems.map((selected) => selected.label).join(', ');
   this.selectedOptions = this.getSelectedItems();
 }
 this.selectedItems = selection;
 this.isVisible = this.selectedOptions && this.selectedOptions.length > 0;
}

getSelectedItems() {
 return this.currentOptions.filter((item) => item.selected);
}}