import {Component, OnInit, ViewChild} from '@angular/core';
import { CupboardService } from '../../services/cupboard.service';
import { Need, GoalType } from '../../models/Need';
import { userType } from '../../models/User';
import {BehaviorSubject, catchError, Observable, 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';

@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;
    // selectedNeed: Need | null = null;
    needs: Need[] = [];
    searchResults: Need[] = [];
    sortMode: 'Ascending' | 'Descending' = 'Ascending'
    itemsPerPage = 5;
    currentSortAlgo = 'sortByPriority';

    constructor(
        private cupboardService: CupboardService,
        private authService: AuthService,
        private toastService: ToastsService,
        private usersService: UsersService
    ) {}

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

    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) {
                    //sorting based on algo selected
                    // SortingAlgoArrays.forEach(algo => {
                    //     if(algo.name === this.sortSelection) {
                    //         this.currentSortAlgo = SortingAlgoArrays[this.sort];
                    //         console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
                    //         return
                    //     }
                    // });

                    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)
    }

    async updateSearchResults() {
        // if (this.needList) {
        //     while (this.selectedForm == 'update') {
        //         // this.searchResults = this.needList.searchResults
        //         await new Promise(resolve => setTimeout(resolve, 100));
        //     }
        // }
    }

    // ------------ HELPER FUNCTIONS --------------- //

    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);
    }

    // -------------- DISPLAY FUNCTIONS -------------- //

    selectForm(name: string) {
        // //get search results from the need list
        // if (this.needList) {
        //     // this.searchResults = this.needList.searchResults;
        // }
        // console.log(this.searchResults)
        // this.selectedForm = name;
        // if (name == 'update') {
        //     if (this.searchResults) {
        //         this.searchResults.forEach((element: any) => {
        //             console.log(element)
        //         });
        //     }
        //
        // }
    }

    // populateForm(need: any): void {
    //     this.selectForm('update');
    //     this.selectedNeed = { ...need };
    // }
    //
    // select(need : Need) {
    //     //emit value
    //     // this.currentNeed.emit(need);
    //     if (this.selectedNeed) {
    //         //revert already selected need to previous style
    //         console.log(need.id);
    //         let button = document.getElementById('need-button-' + this.selectedNeed.id);
    //         if (button) {
    //             console.log(button)
    //             button.style.background = 'lightgray';
    //             button.style.marginLeft = '0%';
    //             button.style.width = '98%';
    //         }
    //         button = document.getElementById('need-edit-button-' + this.selectedNeed.id);
    //         if (button) {
    //             button.style.visibility = 'visible';
    //         }
    //     }
    //     //change selected need to selected style
    //     this.selectedNeed = need;
    //     let button = document.getElementById('need-button-' + need.id);
    //     if (button) {
    //         button.style.background = 'white';
    //         button.style.marginLeft = '4%';
    //         button.style.width = '100%';
    //     }
    //     button = document.getElementById('need-edit-button-' + need.id);
    //     if (button) {
    //         button.style.visibility = 'hidden';
    //     }
    // }

    // submit(form: any) {
    //     const need: Need = {
    //         name: form.name,
    //         image: form.image,
    //         location: form.location,
    //         id: 0,
    //         maxGoal: form.maxGoal,
    //         type: form.type,
    //         urgent: !!form.urgent,
    //         filterAttributes: [],
    //         current: 0,
    //         description: form.description
    //     };
    //     console.log("need:", need);
    //     console.log("form submitted. creating need: ", need);
    //     this.cupboardService.createNeed(need)
    //         .pipe(catchError((ex, _) => {
    //             if (ex.status == 500) {
    //                 this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
    //             } else if (ex.status == 400) {
    //                 this.toastService.sendToast(ToastType.ERROR, ex.error);
    //             } else {
    //                 this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
    //             }
    //             return of()
    //         }))
    //         .subscribe(
    //             (result) => {
    //                 if (result) {
    //                     console.log("need created successfully");
    //                     // this.needList?.refresh()
    //                 } else {
    //                     console.log("need creation failed");
    //                 }
    //             }
    //
    //         );
    // }

    // -------------- CRUD OPERATIONS -------------- //

    // delete(id : number) {
    //     this.cupboardService.deleteNeed(id).subscribe(() => {
    //         this.toastService.sendToast(ToastType.INFO, "Need deleted.")
    //         this.needs = this.needs.filter(n => n.id !== id)
    //     })
    //     this.refresh();
    // }
    //
    // 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, _) =>  {
    //                     console.error(err);
    //                     return of();
    //                 }))
    //                 .subscribe(() => {
    //                     this.usersService.refreshBasket();
    //                 });
    //         } else {
    //             this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
    //         }
    //     }
    // }

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