​

import { HttpClient } from '@angular/common/http';

import { Component, Input, OnInit, Output, EventEmitter, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';

import { UntypedFormControl } from '@angular/forms';

import { Router } from '@angular/router';

import { BehaviorSubject, debounceTime, delay, map, Observable, Subject, switchMap, take, tap } from 'rxjs';

import { MongoDbService } from 'src/app/core/services/api/mongodb.service';

import { environment } from 'src/environments/environment';

​

​

@Component({

  selector: 'app-nav-menu',

  templateUrl: './nav-menu.component.html',

  styleUrls: ['./nav-menu.component.scss'],

})

export class NavMenuComponent implements OnInit {

​

  public search: string;

  private isText = false;

  private timeout: any = null

​

  results: Observable<any>

  notFound = false;

  loading = false;

  dataLoaded = false;

  navigatingDropdown: boolean = false;

  initialSearchText: string | null = null;

​

  searchText: BehaviorSubject<string> = new BehaviorSubject<string>('');

  searchTermValue: string;

  selectedOption: any; // Property to hold the selected option

​

  @Input() searchParam = '';

  @Input() brands;

  @Input() categories;

  @Input() viewport

  @Input() decorations;

  @Output() menuOption = new EventEmitter();

  readonly inputSearch = new UntypedFormControl('')

  searchValue: string;

​

  constructor(

    private router: Router,

    private http: HttpClient,

    private _mongo: MongoDbService,

    private cdRef: ChangeDetectorRef

  ) { 

    this.searchText.pipe(take(1)).subscribe(value => {

      this.searchTermValue = value

    });

​

      this.results = this.searchText.pipe(

        debounceTime(250),

        switchMap((value: any) => {

          const name = typeof value === 'string' ? value : '';

          return this.filter(name)

        }),

        tap((results: any) =>

          results && results.length > 0 ? (this.notFound = false) : (this.notFound = true)

        )

      );

  }

​

  ngOnInit(): void {

    this.search = this.searchParam

    if(this.categories){

      let data = Array.of(this.categories)

    }

  }

​

  onSearchInputChange(value: string) {

    this.searchText.next(value);

  }

​

  searchTerm() {

    this.searchText.pipe(take(1)).subscribe(value => {

      this.filterNavbar('search', value)

​

    });

  }

​

  filter(value: string): any {

    const filterValue = value.toLowerCase();

    if(!this.navigatingDropdown) {

      const url = `${environment.apiMicroservice}products/search?search=${encodeURI(filterValue)}&page=1&pageSize=10`;

      this.searchValue = value;

      this.loading = true;

      return this.http.get(url).pipe(

        map((data: any) => {

          return data.products

        }),

        delay(300),

        tap(() => (this.loading = false))

      );

    }

  }

​

  displayValue(value: any): string {

    return value ? value : '';

  }

​

  onOpen(): void {

    if (!this.dataLoaded) {

      this.searchText.next('');

      this.selectedOption = null; // Clear the selected option when autocomplete is opened

      this.dataLoaded = true;

    }

  }

​

  // Function to handle image URLs based on the vendor

  getVendorImageUrl(option: any): string {

    let baseUrl = 'https://img.stokkup.com/app/no-image.png'; // Default URL for images

​

    if (option && option.vendor) {

      if (option.vendor.includes('ssactivewear')) {

        baseUrl = 'https://cdn.ssactivewear.com/';

      } else if (option.vendor.includes('alphabroder')) {

        baseUrl = 'https://www.alphabroder.com/prodimg/large/';

      } else if(option.vendor.includes('sanmar') || option.vendor.includes('AS Colour') || option.customProduct && option.customProduct === true ) {

        baseUrl = ''

      }

      // Add more conditions for other vendors if needed

    }

​

    return baseUrl + (option?.images[0] || ''); // Append the image name to the base URL

  }

  goToProduct(option: any) {

   const url = `/catalog/${encodeURIComponent(option.brand)}/${option.style}`;

   location.href = url;

​

  }

  goToProductOption(option: any) {

    this.selectedOption = option; // Capture the selected option

​

    const [brand, title] = option.option.value.split('-');

    if(this.navigatingDropdown) {

      const url = `/catalog/${encodeURIComponent(brand)}/${title}`;

      location.href = url;

    }

   }

​

  onChange(event){

    if(event.target.value){

      this.isText = true

    }else {

      this.isText = false

    }

    let value = event.target.value

    this.search = value

    clearTimeout(this.timeout)

    this.timeout = setTimeout(() => {

      if(this.navigatingDropdown && event.keyCode == 13) {

        let searchQueryObj = {

          search : this.search

        }

        this.goToProduct(searchQueryObj)

      }

      else if(event.keyCode == 13){

        this.filterNavbar('search', this.search) // event emitter to hit api

      }

    }, 1500)

  }

​

  filterNavbar(key: string, item: string){

    this.search = !key ? '' : this.search

    let option = {key, item}

    if(!key && !item) {

      this.router.navigate(['catalog/'])    

    } else {

      this.menuOption.emit(option);

    }

  }

​

  onKeyDown(event: KeyboardEvent) {

    // Detect arrow keys (Up: 38, Down: 40)

    if (event.key === "ArrowUp" || event.key === "ArrowDown") {

      this.navigatingDropdown = true;

    } 

  }

​

  clear(){

    this.isText = false

    this.search = '';

    this.filterNavbar('', this.search)

  }

​

}

​