import { Component, OnInit, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChartComponent } from '../components/chart/chart.component';
import { SelectComponent } from '../components/select/select.component';
import { DataService } from '../services/data.service';
import { TableComponent } from '../components/table/table.component';
import { Header } from '../components/table/header';
import { FilterService } from '../services/filters.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ChartComponent, SelectComponent, TableComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  title = 'Georgia Milestones';

  data = inject(DataService);
  filter = inject(FilterService);

  header = [new Header({ label: 'School', source: 'school' })];
  rows: Record<string, any>[] = [];

  ngOnInit(): void {
    // this.filter.filters$.subscribe((filters: KeyValue[]) => {
    //   this.data.Data.pipe(take(1)).subscribe((data: Milestone[]) => {
    //     const result = data.filter((d: Milestone) => {
    //       const match = (filters ?? []).findIndex((f: KeyValue) => {
    //         switch (f.key) {
    //           case 'year':
    //             return d.Year.toString() === f.value;
    //           case 'grade':
    //             return d.Grade.toString() === f.value;
    //           case 'county':
    //             return d.County === f.value;
    //           case 'school':
    //             return d.School === f.value;
    //         }
    //         return false;
    //       });
    //       return match > -1;
    //     });
    //     this.rows = result.map((r: Milestone) => ({ school: r.School }));
    //   });
    // });
  }
}
