import { Component, inject, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { Period } from 'src/app/period/period';

import { ProductGroup } from '../../core/product-group';
import { Recipe } from '../recipe';
import { RecipeListDatasource } from './recipe-list-datasource';

@Component({
  selector: 'app-role-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css'],
  imports: [
    MatIconModule,
    RouterModule,
    ReactiveFormsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatButtonModule,
  ],
})
export class RecipeListComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort!: MatSort;
  form: FormGroup<{
    period: FormControl<Period>;
    productGroup: FormControl<ProductGroup | string | null>;
  }>;

  productGroups: ProductGroup[] = [];
  periods: Period[] = [];
  periodFilter: BehaviorSubject<Period> = new BehaviorSubject<Period>(new Period());
  productGroupFilter = new BehaviorSubject<string>('');
  list: Recipe[] = [];
  data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
  dataSource: RecipeListDatasource = new RecipeListDatasource(
    this.productGroupFilter,
    this.data,
    this.paginator,
    this.sort,
  );

  period: Period = new Period();

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['name', 'yield', 'date', 'source'];

  constructor() {
    this.form = new FormGroup({
      period: new FormControl(new Period(), { nonNullable: true }),
      productGroup: new FormControl<ProductGroup | string | null>(null),
    });
    // Listen to Period Change
    this.form.controls.period.valueChanges.subscribe((x) => {
      this.router.navigate([], {
        relativeTo: this.route,
        queryParams: { p: x.id },
        replaceUrl: true,
        queryParamsHandling: 'merge',
      });
      this.period = x;
    });
  }

  ngOnInit() {
    this.dataSource = new RecipeListDatasource(this.productGroupFilter, this.data, this.paginator, this.sort);
    // this.dataSource = new RecipeListDatasource(this.validFromFilter, this.validTillFilter, this.productGroupFilter, this.data);
    this.route.data.subscribe((value) => {
      const data = value as { list: Recipe[]; productGroups: ProductGroup[]; periods: Period[] };
      this.productGroups = data.productGroups;
      this.periods = data.periods;
      const period = this.periods.find((x) => x.id === this.route.snapshot.queryParamMap.get('p')) || this.periods[0];

      this.form.setValue({
        period: period,
        productGroup: '',
      });
      this.data.next(data.list);
    });
  }

  filterProductGroup(val: string) {
    this.productGroupFilter.next(val || '');
  }
}