import {Component, Input, OnChanges, TemplateRef} from '@angular/core';
import {GoalType, Need} from '../../models/Need';

@Component({
    selector: 'app-need-list',
    standalone: false,
    templateUrl: './need-list.component.html',
    styleUrl: './need-list.component.css'
})
export class NeedListComponent implements OnChanges {

    @Input({required: true}) needs!: Need[]
    @Input({required: true}) uid!: number
    @Input() itemsPerPage: number = 5;
    @Input() actionArea: TemplateRef<any> | null = null

    visibleNeeds: Need[] = [];
    currentPage: number = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0;
    totalPages: number = 0;

    ngOnChanges() {
        this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0;
        this.updateVisibleNeeds()
    }

    getPrefix(need: Need) {
        return (need.type === GoalType.MONETARY) ? "$" : "";
    }

    //increment/decrement
    decrementPage() {
        this.currentPage--;
        localStorage.setItem('currentPage'+this.uid, this.currentPage.toString());
        this.updateVisibleNeeds();
    }

    incrementPage() {
        this.currentPage++;
        localStorage.setItem('currentPage'+this.uid, this.currentPage.toString());
        this.updateVisibleNeeds();
    }

    //skipping pages
    lastPage() {
        this.currentPage = this.totalPages - 1
        localStorage.setItem('currentPage'+this.uid, this.currentPage.toString());
        this.updateVisibleNeeds()
    }

    firstPage() {
        this.currentPage = 0
        localStorage.setItem('currentPage'+this.uid, this.currentPage.toString());
        this.updateVisibleNeeds()
    }

    updateVisibleNeeds() {
        this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage);
        this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
    }

    protected readonly GoalType = GoalType;
    protected readonly Infinity = Infinity;
}