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 { OptionMulti } from '../../interfaces/option.interface';
import { SqLoaderComponent } from '../sq-loader/sq-loader.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { SqTagComponent } from '../sq-tag/sq-tag.component';
import { SqSelectorComponent } from '../sq-selector/sq-selector.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 { SearchValidValuesPipe } from '../../pipes/search-valid-values/search-valid-values.pipe';
import { SqClickOutsideDirective } from '../../directives/sq-click-outside/sq-click-outside.directive';
import { SqDataTestDirective } from '../../directives/sq-data-test/sq-data-test.directive';

/**
 * Represents a multi-tag select component.
 *
 * @example
 * <sq-select-multi-tags
 *   [name]="'tags'"
 *   [value]="selectedTags"
 *   [options]="tagOptions"
 *   (valueChange)="handleTagSelection($event)"
 * >
 * </sq-select-multi-tags>
 *
 * @implements {OnChanges}
 */
@Component({
  selector: 'sq-select-multi-tags',
  templateUrl: './sq-select-multi-tags.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./sq-select-multi-tags.component.scss'],
  standalone: true,
  imports: [
    NgClass,
    NgStyle,
    NgTemplateOutlet,
    AsyncPipe,
    FormsModule,
    ScrollingModule,
    SqLoaderComponent,
    SqTooltipComponent,
    SqTagComponent,
    SqDataTestDirective,
    SqSelectorComponent,
    UniversalSafePipe,
    TranslateInternalPipe,
    SearchPipe,
    SearchValidValuesPipe,
    SqClickOutsideDirective,
  ],
  providers: [],
})
export class SqSelectMultiTagsComponent implements OnChanges {
  /**
   * The name attribute for the multi-tag select input.
   *
   * @default 'random-name-[hash-random-code]'
   */
  @Input() name = `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`;

  /**
   * The selected values for the multi-tag select input.
   */
  @Input() value?: OptionMulti[] = [];

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

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

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

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

  /**
   * The label for the multi-tag 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 multi-tag select input.
   */
  @Input() externalError = '';

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

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

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

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

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

  /**
   * Indicates whether the multi-tag 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;

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

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

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

  /**
   * Maximum height for the multi-tag values.
   */
  @Input() maxHeight = '100%';

  /**
   * 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<OptionMulti> = [];

  /**
   * Maximum number of tags that can be chosen.
   */
  @Input() maxTags?: number;

  /**
   * Minimum number of tags that can be chosen.
   */
  @Input() minTags?: number;

  /**
   * Indicates whether to show selected tags inside the input.
   */
  @Input() showInside = true;

  /**
   * Indicates whether to hide the search input.
   */
  @Input() hideSearch = false;

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

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

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

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

  /**
   * Event emitted when the selected values change.
   */
  @Output() valueChange: EventEmitter<Array<OptionMulti>> = new EventEmitter();

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

  /**
   * Event emitted when the multi-tag select dropdown is closed.
   */
  @Output() closeChange: EventEmitter<boolean> = new EventEmitter();

  /**
   * Event emitted when a tag is removed.
   */
  @Output() removeTag: EventEmitter<OptionMulti> = new EventEmitter();

  /**
   * Event emitted when the multi-tag 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;

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

  /**
   * Indicates whether the multi-tag select dropdown is open.
   */
  open = false;

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

  /**
   * Indicates whether the value has changed.
   */
  valueChanged = false;

  /**
   * Indicates whether a timeout has occurred for input changes.
   */
  timeouted = false;

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

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

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

  /**
   * Control the readonly on reach the maxTags
   */
  isMaxTags = false;

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

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

  /**
   * The size for the cdk-virtual-scroll-viewport (default 32px).
   */
  cdkItemSize: string | null = '32';

  /**
   * Constructs a new SqSelectMultiTagsComponent.
   *
   * @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();
    }
    if (changes.hasOwnProperty('value') || changes.hasOwnProperty('minTags') || changes.hasOwnProperty('maxTags')) {
      this.validate();
    }
  }

  /**
   * Determines if an item exists in the selected values.
   *
   * @param {OptionMulti} item - The item to search for.
   * @returns {boolean} True if the item exists in the selected values; otherwise, false.
   */
  findItemInValue = useMemo((item: OptionMulti, value?: Array<OptionMulti>) => {
    return !!value?.find(value => value.value === item.value);
  });

  /**
   * Verifies if any options have children.
   *
   * @param {OptionMulti[]} options - The options to check.
   * @returns {boolean} True if any option has children; otherwise, false.
   */
  verifyIfOptionsHasChildren = useMemo((options: OptionMulti[]) => {
    return options.some(item => item.children?.length);
  });

  /**
   * Verifies if an item has children that are selected.
   *
   * @param {OptionMulti} item - The item to check.
   * @returns {boolean} True if the item has selected children; otherwise, false.
   */
  verifyIfHasChildrenInValue = useMemo((item: OptionMulti, value?: Array<OptionMulti>) => {
    if (item.children?.length) {
      const hasAllChildren = item.children.every(child => this.findItemInValue(child, value));
      if (hasAllChildren && !this.findItemInValue(item, value) && !this.timeouted) {
        this.timeouted = true;
        setTimeout(() => {
          this.emit(item, true);
          this.timeouted = false;
        }, 0);
      }
      return !!item.children.find(child => this.findItemInValue(child, value));
    }
    return false;
  });

  /**
   * Removes an item from the selected values.
   *
   * @param {OptionMulti} item - The item to remove.
   */
  removeItem(item: OptionMulti, event: any) {
    event?.stopPropagation();
    if (!this.readonly && !this.disabled) {
      if (item.children?.length) {
        item.children.forEach(child => {
          this.value = this.value?.filter(value => value.value !== child.value);
        });
      }
      this.value = this.value?.filter(value => value.value !== item.value);

      this.valueChange.emit(this.value);
      this.removeTag.emit(item);
      this.validate();
    }
  }

  /**
   * Emits a change event with the specified object and checked state.
   *
   * @param {OptionMulti} object - The object to emit.
   * @param {boolean} checked - The checked state.
   */
  emit(object: OptionMulti, checked: boolean) {
    if (checked) {
      this.value?.push(object);
      // This code adds all children of a parent to value. Commented out for now as it is not the desired behavior.
      // if (object.children?.length) {
      //   object.children.forEach((item) => {
      //     if (!this.value.find((child) => child.value === item.value)) {
      //       this.value.push(item)
      //     }
      //   })
      // }
    } else {
      this.value = this.value?.filter(item => item.value !== object.value);
      if (object.children?.length) {
        object.children.forEach(item => {
          this.value = this.value?.filter(child => child.value !== item.value);
        });
      }
    }
    this.valueChanged = true;
    this.valueChange.emit(this.value);
    this.validate();
  }

  /**
   * 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 multi-tag select dropdown.
   */
  closeDropdown() {
    this.open = false;
    this._options = [];
    this.searchText = '';
    this.closeChange.emit(this.valueChanged);
    this.valueChanged = false;
  }

  /**
   * Handles the collapse of an item and set the cdkItemSize if the item is open.
   *
   * @param {OptionMulti} item - The item to collapse.
   */
  handleCollapse(item: OptionMulti) {
    item.open = !item.open;
    if (item.children) {
      if (this.options.find(option => option.open) || item.open) {
        this.cdkItemSize = null;
      } else {
        this.cdkItemSize = '32';
      }
    }
  }

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

  /**
   * Validates the multi-tag select input and sets the error state.
   */
  validate() {
    if (this.externalError) {
      this.error = false;
    } else if (this.required && !this.value?.length) {
      this.setError('forms.required');
      this.valid.emit(false);
    } else if (this.minTags && this.value && this.value?.length < this.minTags) {
      this.setError('forms.minimumRequired', { minTags: this.minTags });
      this.valid.emit(false);
    } else if (this.maxTags && this.value && this.value?.length === this.maxTags) {
      this.renderOptionsList = false;
      this.isMaxTags = true;
      this.error = '';
      this.valid.emit(true);
    } else {
      this.isMaxTags = false;
      this.error = '';
      this.valid.emit(true);
    }
  }

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

  /**
   * Change searchtext with timeout and detect detectChanges
   */
  async modelChange(event: any) {
    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();
    }
  }

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