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 '../models/header';
import { FilterService } from '../services/filters.service';
import { Observable } from 'rxjs';
import { Milestone } from '../enums/milestone';
import { ScoresComponent } from './scores/scores.component';
import { CommonModule } from '@angular/common';
import { CohortSectionComponent } from './cohort-section/cohort-section.component';
import { KeyValue } from '../models/key-value';
import { QueryComponent } from '../components/query/query.component';
import { MetadataComponent } from '../components/metadata/metadata.component';
import { ResultComponent } from '../components/result/result.component';

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

  county = '644';
  school = ['3067', '0605'];
  grades = [3, 4, 5];
  cohorts: string[] = [];

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

  header = [
    { label: 'School', source: Milestone.School },
    { label: 'Grade', source: Milestone.Grade },
  ].map((data) => new Header(data));
  rows: Observable<Record<string, any>[]> = this.data.Data$;

  ngOnInit(): void {
    this.data.Cohorts$.subscribe((kv: KeyValue[]) => {
      this.cohorts = kv.map((i: KeyValue) => i.key);
    });
    // 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 }));
    //   });
    // });
  }

  onReset(event: any): void {
    this.filter.reset();
  }
}