import { LightningElement, api } from "lwc";

const MINIMAL_SEARCH_TERM_LENGTH = 2; // Min number of chars required to search
const SEARCH_DELAY = 300; // Wait 300 ms after user stops typing then, peform search

export default class Lookup extends LightningElement {
  @api label;
  @api required;
  @api placeholder = "";
  @api isMultiEntry = false;
  @api errors = [];
  @api scrollAfterNItems;

  searchTerm = "";
  searchResults = [];
  hasFocus = false;
  loading = false;
  isDirty = false;

  cleanSearchTerm;
  blurTimeout;
  searchThrottlingTimeout;
  curSelection = [];

  // EXPOSED FUNCTIONS
  @api
  set selection(initialSelection) {
    this.curSelection = Array.isArray(initialSelection)
      ? initialSelection
      : [initialSelection];
  }
  get selection() {
    return this.curSelection;
  }

  @api
  setSearchResults(results) {
    // Reset the spinner
    this.loading = false;
    // Clone results before modifying them to avoid Locker restriction
    const resultsLocal = JSON.parse(JSON.stringify(results));
    // Format results
    this.searchResults = resultsLocal.map(result => {
      // Clone and complete search result if icon is missing
      if (this.searchTerm.length > 0) {
        const regex = new RegExp(`(${this.searchTerm})`, "gi");
        result.titleFormatted = result.title
          ? result.title.replace(regex, "<strong>$1</strong>")
          : result.title;
        result.subtitleFormatted = result.subtitle
          ? result.subtitle.replace(regex, "<strong>$1</strong>")
          : result.subtitle;
      }
      if (typeof result.icon === "undefined") {
        const { id, sObjectType, title, subtitle } = result;
        return {
          id,
          sObjectType,
          icon: "standard:default",
          title,
          subtitle
        };
      }
      return result;
    });
  }

  @api
  getSelection() {
    return this.curSelection;
  }

  // INTERNAL FUNCTIONS

  updateSearchTerm(newSearchTerm) {
    this.searchTerm = newSearchTerm;

    // Compare clean new search term with current one and abort if identical
    const newCleanSearchTerm = newSearchTerm
      .trim()
      .replace(/\*/g, "")
      .toLowerCase();
    if (this.cleanSearchTerm === newCleanSearchTerm) {
      return;
    }

    // Save clean search term
    this.cleanSearchTerm = newCleanSearchTerm;

    // Ignore search terms that are too small
    if (newCleanSearchTerm.length < MINIMAL_SEARCH_TERM_LENGTH) {
      this.searchResults = [];
      return;
    }

    // Apply search throttling (prevents search if user is still typing)
    if (this.searchThrottlingTimeout) {
      clearTimeout(this.searchThrottlingTimeout);
    }
    // eslint-disable-next-line @lwc/lwc/no-async-operation
    this.searchThrottlingTimeout = setTimeout(() => {
      // Send search event if search term is long enough
      if (this.cleanSearchTerm.length >= MINIMAL_SEARCH_TERM_LENGTH) {
        // Display spinner until results are returned
        this.loading = true;

        const searchEvent = new CustomEvent("search", {
          detail: {
            searchTerm: this.cleanSearchTerm,
            selectedIds: this.curSelection.map(element => element.id)
          }
        });
        this.dispatchEvent(searchEvent);
      }
      this.searchThrottlingTimeout = null;
    }, SEARCH_DELAY);
  }

  isSelectionAllowed() {
    if (this.isMultiEntry) {
      return true;
    }
    return !this.hasSelection();
  }

  hasResults() {
    return this.searchResults.length > 0;
  }

  hasSelection() {
    return this.curSelection.length > 0;
  }

  // EVENT HANDLING

  handleInput(event) {
    // Prevent action if selection is not allowed
    if (!this.isSelectionAllowed()) {
      return;
    }
    this.updateSearchTerm(event.target.value);
  }

  handleResultClick(event) {
    const recordId = event.currentTarget.dataset.recordid;

    // Save selection
    let selectedItem = this.searchResults.filter(
      result => result.id === recordId
    );
    if (selectedItem.length === 0) {
      return;
    }
    selectedItem = selectedItem[0];
    const newSelection = [...this.curSelection];
    newSelection.push(selectedItem);
    this.curSelection = newSelection;
    this.isDirty = true;

    // Reset search
    this.searchTerm = "";
    this.searchResults = [];

    // Notify parent components that selection has changed
    this.dispatchEvent(new CustomEvent("selectionchange"));
  }

  handleComboboxClick() {
    // Hide combobox immediatly
    if (this.blurTimeout) {
      window.clearTimeout(this.blurTimeout);
    }
    this.hasFocus = false;
  }

  handleFocus() {
    // Prevent action if selection is not allowed
    if (!this.isSelectionAllowed()) {
      return;
    }
    this.hasFocus = true;
  }

  handleBlur() {
    // Prevent action if selection is not allowed
    if (!this.isSelectionAllowed()) {
      return;
    }
    // Delay hiding combobox so that we can capture selected result
    // eslint-disable-next-line @lwc/lwc/no-async-operation
    this.blurTimeout = window.setTimeout(() => {
      this.hasFocus = false;
      this.blurTimeout = null;
    }, 300);
  }

  handleRemoveSelectedItem(event) {
    const recordId = event.currentTarget.name;
    this.curSelection = this.curSelection.filter(item => item.id !== recordId);
    this.isDirty = true;
    // Notify parent components that selection has changed
    this.dispatchEvent(new CustomEvent("selectionchange"));
  }

  handleClearSelection() {
    this.curSelection = [];
    this.isDirty = true;
    // Notify parent components that selection has changed
    this.dispatchEvent(new CustomEvent("selectionchange"));
  }

  // STYLE EXPRESSIONS

  get getContainerClass() {
    let css = "slds-combobox_container slds-has-inline-listbox ";
    if (this.hasFocus && this.hasResults()) {
      css += "slds-has-input-focus ";
    }
    if (this.errors.length > 0) {
      css += "has-custom-error";
    }
    return css;
  }

  get getDropdownClass() {
    let css =
      "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ";
    if (
      this.hasFocus &&
      this.cleanSearchTerm &&
      this.cleanSearchTerm.length >= MINIMAL_SEARCH_TERM_LENGTH
    ) {
      css += "slds-is-open";
    }
    return css;
  }

  get getInputClass() {
    let css = "slds-input slds-combobox__input has-custom-height ";
    if (
      this.errors.length > 0 ||
      (this.isDirty && this.required && !this.hasSelection())
    ) {
      css += "has-custom-error ";
    }
    if (!this.isMultiEntry) {
      css +=
        "slds-combobox__input-value " +
        (this.hasSelection() ? "has-custom-border" : "");
    }
    return css;
  }

  get getComboboxClass() {
    let css = "slds-combobox__form-element slds-input-has-icon ";
    if (this.isMultiEntry) {
      css += "slds-input-has-icon_right";
    } else {
      css += this.hasSelection()
        ? "slds-input-has-icon_left-right"
        : "slds-input-has-icon_right";
    }
    return css;
  }

  get getSearchIconClass() {
    let css = "slds-input__icon slds-input__icon_right ";
    if (!this.isMultiEntry) {
      css += this.hasSelection() ? "slds-hide" : "";
    }
    return css;
  }

  get getClearSelectionButtonClass() {
    return (
      "slds-button slds-button_icon slds-input__icon slds-input__icon_right " +
      (this.hasSelection() ? "" : "slds-hide")
    );
  }

  get getSelectIconName() {
    return this.hasSelection() ? this.curSelection[0].icon : "standard:default";
  }

  get getSelectIconClass() {
    return (
      "slds-combobox__input-entity-icon " +
      (this.hasSelection() ? "" : "slds-hide")
    );
  }

  get getInputValue() {
    if (this.isMultiEntry) {
      return this.searchTerm;
    }
    return this.hasSelection() ? this.curSelection[0].title : this.searchTerm;
  }

  get getInputTitle() {
    if (this.isMultiEntry) {
      return "";
    }

    return this.hasSelection() ? this.curSelection[0].title : "";
  }

  get getListboxClass() {
    return (
      "slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid " +
      (this.scrollAfterNItems
        ? "slds-dropdown_length-with-icon-" + this.scrollAfterNItems
        : "")
    );
  }

  get isInputReadonly() {
    if (this.isMultiEntry) {
      return false;
    }
    return this.hasSelection();
  }

  get isExpanded() {
    return this.hasResults();
  }
}