import { Component } from '@angular/core';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
import { userType } from '../../models/User';
@Component({
  selector: 'app-need-list',
  standalone: false,
  templateUrl: './need-list.component.html',
  styleUrl: './need-list.component.css'
})
export class NeedListComponent {
  needs: Need[] = [];
  searchResults: Need[] = [];

  constructor(
    private cupboardService: CupboardService,
    private usersService: UsersService
  ) {}

    refresh() {
        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
    }

  ngOnInit(): void {
    this.refresh()
   
     this.close();
  }

  private showElement(element: any) {
    if (element){
      element.style.visibility = 'visible';
      element.style.position = 'relative';
    }
  }

  private hideElement(element: any) {
    if (element){
      element.style.visibility = 'hidden';
      element.style.position = 'absolute';
    }
  }

  private updateSearchStatus(text: string) {
    let element = document.getElementById('search-status');
    if (element) {
      element.innerHTML = text;
    }
  }

  open() {
    this.hideElement(document.getElementById('search-button'));
    this.showElement(document.getElementById('search-form'));
  }

  close() {
    this.hideElement(document.getElementById('search-form'));
    this.showElement(document.getElementById('search-button'));
    this.hideElement(document.getElementById('search-status'));
  }

  private searchDelay: any;

  async search(form: any) {
    //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls

    //remove previous search if it exists
    if (this.searchDelay) {
      clearTimeout(this.searchDelay);
    }

    this.searchDelay = setTimeout(() => {
      const currentSearchValue = form.search; //latest value of the search
      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
        this.searchResults = n;
        console.log(currentSearchValue, this.searchResults);
        this.showElement(document.getElementById('search-results'));
        this.showElement(document.getElementById('search-status'));
        if (this.searchResults.length === this.needs.length) {
          this.updateSearchStatus("Please refine your search");
          this.searchResults = [];
        } else if (this.searchResults.length === 0) {
          this.updateSearchStatus("No results found");
        } else {
          this.updateSearchStatus("Search results:");
        }
      });
    }, 250);
  }

  delete(id : number) {
    this.cupboardService.deleteNeed(id).subscribe(() => {
      this.needs = this.needs.filter(n => n.id !== id)
    })
  }

  isManager() {
    const type = this.usersService.getCurrentUser()?.type;
    return type === ("MANAGER" as unknown as userType);
  }

  back() {
    this.searchResults = [];
  }
}