ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { environment } from 'src/environments/environment';



@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html',
  styleUrls: ['./fetch-data.component.css'],
})
export class FetchDataComponent implements OnInit {
  animals?: Animal[];
  sex?: string[];
  breed?: string[];
  species?: string[];
  aFilters: aFilter[] = [];

  filterDictionary = new Map<string, string>();
  
  dataSource?: MatTableDataSource<Animal>;
  displayedColumns: string[] = ['Name', 'Breed', 'Species', 'Sex', 'Size', 'Birthday', 'Founded'];
  pageSizeOptions: number[] = [5, 10, 25];
  pageSize = 5;
  pageIndex = 0;
  length = 0;
  showFirstLastButtons = true;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchAnimals();

  }

/*  ngAfterViewInit(): void {
    this.initializeSortAndPaginator();
  }

  initializeSortAndPaginator(): void {
    if (this.dataSource && this.sort && this.paginator) {
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
     }
  }*/


  fetchAnimals(): void {
    this.http.get<Animal[]>(environment.baseUrl + 'api/Animal').subscribe(data => {
      this.animals = data;
      this.sex = Array.from(new Set(this.animals.map(animal => animal.sex == '1' ? 'Male' : 'Female')));
      this.breed = Array.from(new Set(this.animals.map(animal => animal.animalBreed)));
      this.species = Array.from(new Set(this.animals.map(animal => animal.animalSpecies)));
      this.dataSource = new MatTableDataSource(this.animals);
      this.dataSource.filterPredicate = this.customFilterPredicate;
      this.length = this.animals.length;
      this.aFilters.push({ name: 'sex', options: this.sex, defaultValue: 'All' });
      this.aFilters.push({ name: 'breed', options: this.breed, defaultValue: 'All' });
      this.aFilters.push({ name: 'species', options: this.species, defaultValue: 'All' });
    });
  }


  applyFilter(event: Event): void {
    const filterValue = (event.target as HTMLInputElement).value;
    if (this.dataSource) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  }

  applyEmpFilter(event: MatSelectChange, aFilter: aFilter): void {
    this.filterDictionary.set(aFilter.name, event.value);
    const jsonString = JSON.stringify(Array.from(this.filterDictionary.entries()));
    if (this.dataSource) {
      this.dataSource.filter = jsonString;
    }
  }

  handlePageEvent(event: PageEvent): void {
    this.pageSize = event.pageSize;
    this.pageIndex = event.pageIndex;
  }

  customFilterPredicate(data: Animal, filter: string): boolean {
    const filterMap = new Map(JSON.parse(filter));

    for (const [key, value] of filterMap.entries()) {
      const recordValue = data[key as keyof Animal];
      if (value !== 'All' && recordValue !== value) {
        return false;
      }
    }

    return true;
  }

  calculateAge(birthdayDate: Date): string {
    const today = new Date();
    const birthDate = new Date(birthdayDate);
    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }

    return age.toString();
  }

}

interface Animal {
  animalName: string;
  animalBreed: string;
  animalSpecies: string;
  sex: string;
  size: string;
  birthdayDate: Date;
  foundedDate: string;
}
interface aFilter {
  name: string;
  options: string[];
  defaultValue: string;
}