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';
import {catchError, of} from 'rxjs';
import {AuthService} from '../../services/auth.service';

@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,
        private authService: AuthService
    ) {}

    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.authService.getCurrentUser()?.type;
        return type === ("MANAGER" as unknown as userType);
    }

    isHelper() {
        const type = this.authService.getCurrentUser()?.type;
        return type === ("HELPER" as unknown as userType);
    }

    add(need: Need) {
        const currentUser = this.authService.getCurrentUser();
        //console.log("get current user in angular:", currentUser)
        if (currentUser) {
            if (!currentUser.basket.includes(need.id)) {
                currentUser.basket.push(need.id);
                this.usersService.updateUser(currentUser)
                    .pipe(catchError((err: any, _) => {
                        console.error(err);
                        return of();
                    }))
                    .subscribe(() => {
                        this.usersService.refreshBasket();
                    });
            } else {
                window.alert("This need is already in your basket!")
            }


        }

    }

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