import {Component, OnInit, ViewChild} from '@angular/core';
import {CupboardService} from '../../services/cupboard.service';
import {Need} from '../../models/Need';
import {catchError, of} from 'rxjs';
import {NeedListComponent} from '../need-list/need-list.component';
import {AuthService} from '../../services/auth.service';
import {ToastsService, ToastType} from '../../services/toasts.service';
import {UsersService} from '../../services/users.service';
import {SortingAlgoArrays} from './sorting';
import {Router} from '@angular/router';
import {ModalService} from '../../services/modal.service';

@Component({
    selector: 'app-cupboard',
    standalone: false,
    templateUrl: './cupboard.component.html',
    styleUrl: './cupboard.component.css'
})
export class CupboardComponent implements OnInit {

    // selectedForm?: string = undefined;
    // needs: any;
    @ViewChild("needList") needList?: NeedListComponent

    private searchDelay: any;
    needs: Need[] = [];
    searchResults: Need[] = [];
    sortMode: 'Ascending' | 'Descending' = 'Ascending'
    itemsPerPage = parseInt(localStorage.getItem('itemsPerPage') ?? '5') ?? 5;
    currentSortAlgo = 'sortByPriority';

    constructor(
        private cupboardService: CupboardService,
        private authService: AuthService,
        private toastService: ToastsService,
        protected usersService: UsersService,
        private router: Router,
        protected modalService: ModalService
    ) {}

    ngOnInit(): void {
        this.cupboardService.getNeeds().subscribe(n => {
            this.needs = n;
            // this.refresh()
            this.search(null)
        });
        this.authService.getCurrentUserSubject().subscribe(
            () => this.usersService.refreshBasket())
    }

    refresh() {
        this.cupboardService.getNeeds().subscribe(n => {
            if (this.sortMode == 'Ascending') {
                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
            } else {
                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
            }
            this.searchResults = this.needs;
            // this.updateVisibleNeeds();
        });

        const form = document.getElementById('search-form') as HTMLFormElement;
        form.reset();
        this.search(null);
    }

    async search(form: any) {
        console.log(this.currentSortAlgo)
        //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);
        }
        if (form) {
            this.searchDelay = setTimeout(() => {

                if (form) {

                    const currentSearchValue = form.search; //latest value of the search
                    this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
                        if (this.sortMode == 'Ascending') {
                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
                        } else {
                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
                        }
                        // this.updateVisibleNeeds();
                    });
                }
            }, 250);
        } else {
            //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
            //clear timeout to stop pending search
            clearTimeout(this.searchDelay);
            this.searchResults = this.needs;
        }
    }

    toggleSortMode(form : any) {
        if (this.sortMode == 'Ascending'){
            this.sortMode = 'Descending'
        } else {
            this.sortMode = 'Ascending'
        }
        this.search(form)
    }

    deleteNeed(id : number) {
        this.cupboardService.deleteNeed(id)
            .pipe(catchError((ex, _) => {
                this.toastService.sendToast(ToastType.ERROR, ex.error)
                return of()
            }))
            .subscribe(() => {
                this.toastService.sendToast(ToastType.INFO, "Need deleted.")
                this.refresh();
            })
    }

    addToBasket(need: Need) {
        const currentUser = this.authService.getCurrentUser();
        if (currentUser) {
            if (!currentUser.basket.includes(need.id)) {
                currentUser.basket.push(need.id);
                this.usersService.updateUser(currentUser)
                    .pipe(catchError((err, _) =>  {
                        console.error(err);
                        return of();
                    }))
                    .subscribe(() => {
                        let action = {label: "View Basket", onAction: () => this.router.navigate(['/basket'])}
                        this.toastService.sendToast(ToastType.INFO, `"${need.name}" Added to basket`, action)
                        this.usersService.refreshBasket();
                    });
            } else {
                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
            }
        }
    }

    editItemsPerPage() {
        if (this.itemsPerPage > this.searchResults.length) {
            this.itemsPerPage = this.searchResults.length
        }
        if (this.itemsPerPage < 1) {
            this.itemsPerPage = 1
        }
        localStorage.setItem('itemsPerPage', this.itemsPerPage.toString())
        this.refresh();
    }

    protected readonly SortingAlgorithms = SortingAlgoArrays;
    protected readonly Object = Object;
}