import { SqDataTestDirective } from './../../directives/sq-data-test/sq-data-test.directive';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ContentChild,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  Optional,
  Output,
  SimpleChanges,
  TemplateRef,
  TrackByFunction,
} from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { TranslateService } from '@ngx-translate/core';
import { useMemo } from '../../helpers/memo.helper';
import { Option } from '../../interfaces/option.interface';
import { SqLoaderComponent } from '../sq-loader/sq-loader.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';
import { TranslateInternalPipe } from '../../pipes/translate-internal/translate-internal.pipe';
import { SearchPipe } from '../../pipes/search/search.pipe';
import { SqClickOutsideDirective } from '../../directives/sq-click-outside/sq-click-outside.directive';

/**
 * Represents a search-based select component.
 *
 * @example
 * <sq-select-search
 *   [name]="'search'"
 *   [value]="selectedOption"
 *   [options]="searchOptions"
 *   (valueChange)="handleOptionSelection($event)"
 *   (searchChange)="handleSearch($event)"
 * >
 * </sq-select-search>
 */
@Component({
  selector: 'sq-select-search',
  templateUrl: './sq-select-search.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./sq-select-search.component.scss'],
  standalone: true,
  imports: [
    NgClass,
    NgStyle,
    NgTemplateOutlet,
    AsyncPipe,
    FormsModule,
    ScrollingModule,
    SqLoaderComponent,
    SqTooltipComponent,
    UniversalSafePipe,
    TranslateInternalPipe,
    SearchPipe,
    SqClickOutsideDirective,
    SqDataTestDirective,
  ],
  providers: [],
})
export class SqSelectSearchComponent implements OnChanges {
  /**
   * The name attribute for the search-based select input.
   */
  @Input() name = `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`;
  /**
   * The selected value for the search-based select input.
   */
  @Input() value?: Option;

  /**
   * The id attribute for the search-based select input.
   */
  @Input() id?: string;

  /**
   * The label for the search-based select input.
   */
  @Input() label = '';

  /**
   * Custom CSS class for styling the component.
   */
  @Input() customClass = '';

  /**
   * Placeholder text for the input field.
   */
  @Input() placeholder = '';

  /**
   * External error message for the search-based select input.
   */
  @Input() externalError = '';

  /**
   * External icon for the search-based select input.
   */
  @Input() externalIcon = '';

  /**
   * Placeholder text for the search input field.
   */
  @Input() placeholderSearch = '';

  /**
   * Indicates whether the search-based select input is disabled.
   */
  @Input() disabled = false;

  /**
   * Indicates whether the search-based select input is readonly.
   */
  @Input() readonly = false;

  /**
   * Indicates whether the search-based select input is required.
   */
  @Input() required = false;

  /**
   * Indicates whether the search-based select input is in a loading state.
   */
  @Input() loading = false;

  /**
   * Indicates whether to use form errors for validation.
   */
  @Input() useFormErrors = true;

  /**
   * Indicates whether to display an error span.
   */
  @Input() errorSpan = true;

  /**
   * Minimum number of characters to perform the searchChange.
   */
  @Input() minCharactersToSearch = 0;

  /**
   * The time interval for input timeout in ms.
   */
  @Input() timeToChange = 800;

  /**
   * Options available for selection.
   */
  @Input() options: Array<Option> = [];

  /**
   * Background color for the search-based select input.
   */
  @Input() backgroundColor = '';

  /**
   * Border color for the search-based select input.
   */
  @Input() borderColor = '';

  /**
   * Color for the label of the search-based select input.
   */
  @Input() labelColor = '';

  /**
   * Tooltip message for the search-based select input.
   */
  @Input() tooltipMessage = '';

  /**
   * Tooltip placement for the search-based select input.
   */
  @Input() tooltipPlacement: 'center top' | 'center bottom' | 'left center' | 'right center' = 'right center';

  /**
   * Tooltip color for the search-based select input.
   */
  @Input() tooltipColor = 'inherit';

  /**
   * Tooltip icon for the search-based select input.
   */
  @Input() tooltipIcon = '';

  /**
   * The data-test attribute value for the select search element.
   *
   * @default 'select-search'
   */
  @Input() selectHandleDataTest = 'select-search';

  /**
   * The data-test attribute value for the select input element.
   *
   * @default 'input-select-search'
   */
  @Input() selectInputDataTest = 'input-select-search';

  /**
   * The data-test attribute value for the select option elements.
   *
   * @default 'option-select-search'
   */
  @Input() SelectOptionDataTest = 'option-select-search';

  /**
   * Event emitted when the selected value changes.
   */
  @Output() valueChange: EventEmitter<Option> = new EventEmitter();

  /**
   * Event emitted when the search input value changes.
   */
  @Output() searchChange: EventEmitter<string> = new EventEmitter();

  /**
   * Event emitted when the search-based select input becomes valid or invalid.
   */
  @Output() valid: EventEmitter<boolean> = new EventEmitter();

  /**
   * The label template for the search-based select input.
   */
  @ContentChild('labelTemplate')
  labelTemplate: TemplateRef<HTMLElement> | null = null;

  /**
   * The select empty template for the search-based select input.
   */
  @ContentChild('selectEmptyTemplate')
  selectEmptyTemplate: TemplateRef<HTMLElement> | null = null;

  /**
   * Error message associated with the search-based select input.
   */
  error: boolean | string = '';

  /**
   * Native element reference.
   */
  nativeElement: ElementRef;

  /**
   * Text entered in the search input field.
   */
  searchText = '';

  /**
   * Indicates when is the time to render the multi-tag select dropdown.
   */
  renderOptionsList = false;

  /**
   * Indicates whether the dropdown is open.
   */
  open = false;

  /**
   * Control options to render
   */
  _options: Array<Option> = [];

  /**
   * Timeout for input changes.
   */
  timeoutInput!: ReturnType<typeof setTimeout>;

  /**
   * The height for the cdk-virtual-scroll-viewport (default 305px).
   */
  cdkVirtualScrollViewportHeight = '305px';

  /**
   * Constructs a new SqSelectSearchComponent.
   *
   * @param {ElementRef} element - The element reference.
   * @param {TranslateService} translate - The optional TranslateService for internationalization.
   * @param {ChangeDetectorRef} changeDetector - Base class that provides change detection functionality.
   */
  constructor(
    public element: ElementRef,
    @Optional() private translate: TranslateService,
    private changeDetector: ChangeDetectorRef
  ) {
    this.nativeElement = element.nativeElement;
  }

  /**
   * Lifecycle hook called when any input properties change.
   *
   * @param changes - The changes detected in the component's input properties.
   */
  async ngOnChanges(changes: SimpleChanges) {
    if (this.open && changes.hasOwnProperty('options')) {
      this.verifyNewOptions();
    }
  }

  /**
   * Emits the selected value and closes the dropdown.
   *
   * @param {any} event - The event containing the selected value.
   */
  emit(event: any) {
    this.value = event;
    this.valueChange.emit(this.value);
    this.validate();
    this.closeDropdown();
  }

  /**
   * Validates the search-based select input and sets the error state.
   */
  validate() {
    if (this.externalError) {
      this.error = false;
    } else if (this.required && !this.value) {
      this.setError('forms.required');
      this.valid.emit(false);
    } else {
      this.valid.emit(true);
      this.error = '';
    }
  }

  /**
   * Do action to open or close thw dropdown list
   */
  async doDropDownAction() {
    if (this.open) {
      this.closeDropdown();
      this.renderOptionsList = await new Promise<boolean>(resolve =>
        setTimeout(() => {
          resolve(false);
        }, 300)
      );
      this.changeDetector.detectChanges();
    } else {
      this.verifyNewOptions();
      this.renderOptionsList = true;
      this.open = await new Promise<boolean>(resolve =>
        setTimeout(() => {
          resolve(true);
        }, 100)
      );
      this.changeDetector.detectChanges();
    }
  }

  /**
   * Closes the dropdown and resets the search text.
   */
  closeDropdown() {
    this.open = false;
    this._options = [];
    this.searchText = '';
  }

  /**
   * Return trackBy for ngFor
   */
  trackByOptValue: TrackByFunction<any> = useMemo((index, opt) => opt.value);

  /**
   * Handles changes to the search input value.
   *
   * @param {string} event - The search input value.
   */
  async onTipSearchChange(event: string) {
    if (!this.minCharactersToSearch || !event.length || event.length >= this.minCharactersToSearch) {
      clearTimeout(this.timeoutInput);
      this.searchText =
        (await new Promise<string>(
          resolve =>
            (this.timeoutInput = setTimeout(() => {
              resolve(event);
            }, this.timeToChange))
        )) || '';
      this.searchChange.emit(event);
      this.changeDetector.detectChanges();
    }
  }

  /**
   * Sets an error message.
   *
   * @param {string} key - The translation key for the error message.
   */
  async setError(key: string) {
    if (this.useFormErrors && this.translate) {
      this.error = await this.translate.instant(key);
    }
  }

  /**
   * Verify new options and set the cdkVirtualScrollViewportHeight
   */
  verifyNewOptions() {
    this._options = this.options;
    if (!this._options.length) {
      this.cdkVirtualScrollViewportHeight = '12px';
    } else if (this._options.length < 15) {
      this.cdkVirtualScrollViewportHeight = this._options.length * 32 + 'px';
    } else {
      this.cdkVirtualScrollViewportHeight = '305px';
    }
  }
}