import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {UsersService} from '../../services/users.service';
import {Router} from '@angular/router';
import {CupboardService} from '../../services/cupboard.service';
import {catchError, firstValueFrom, Observable} from 'rxjs';
import {AuthService} from '../../services/auth.service';
import {ToastsService, ToastType} from '../../services/toasts.service';

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

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

    @ViewChild("contribution") contribution?: Input;

    // this is for login rerouting
    ngOnInit(): void {
        if (!this.authService.getCurrentUser()) {
            this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
            return;
        }

        this.usersService.refreshBasket();
        // this.usersService.removeNeed(); <- call this to remove
    }

    async checkout() {
        let order: { id: number, quantity: number }[] = []

        for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) {
            if (contribution.value == '' || contribution.valueAsNumber <= 0) {
                contribution.setAttribute("style", "border-color: #ff0000");
                this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
                return;
            }
            order.push({id: +contribution.id, quantity: contribution.valueAsNumber});
        }

        for (let c of document.querySelectorAll('.contribution')!) {
            let contribution = c as HTMLInputElement;
            try {
                let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
                await firstValueFrom(this.cupboardService.checkoutNeed(need.id, +contribution.value));
                need.current += +contribution.value;
                this.usersService.removeNeed(+need.id);
                this.toastService.sendToast(ToastType.INFO, "Checkout successful");
            } catch (ex: any) {
                this.toastService.sendToast(ToastType.ERROR, ex.error);
            }
        }
    }

    resetColor(ev: any) {
        console.log(ev);
        (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset")
    }
}