import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute } from '@angular/router';
import * as moment from 'moment';
import { BehaviorSubject } from 'rxjs';

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'],
})
export class RecipeListComponent implements OnInit {
  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort?: MatSort;
  form: FormGroup;
  productGroups: ProductGroup[] = [];
  validFromFilter: BehaviorSubject<Date | null> = new BehaviorSubject<Date | null>(null);
  validTillFilter: BehaviorSubject<Date | null> = new BehaviorSubject<Date | null>(null);
  productGroupFilter: BehaviorSubject<string> = new BehaviorSubject('');
  list: Recipe[] = [];
  data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
  dataSource: RecipeListDatasource = new RecipeListDatasource(
    this.validFromFilter,
    this.validTillFilter,
    this.productGroupFilter,
    this.data,
  );

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['name', 'validity', 'salePrice', 'costPrice', 'costPercentage'];

  constructor(private route: ActivatedRoute, private fb: FormBuilder) {
    this.form = this.fb.group({
      validFrom: '',
      validTill: '',
      productGroup: '',
    });
  }

  ngOnInit() {
    this.dataSource = new RecipeListDatasource(
      this.validFromFilter,
      this.validTillFilter,
      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[] };
      const vf = data.list
        .map((x) => x.validFrom)
        .reduce((p, c) => {
          const pdate = moment(p, 'DD-MMM-YYYY').toDate();
          const cdate = moment(c, 'DD-MMM-YYYY').toDate();
          return pdate < cdate ? p : c;
        });
      const vt = data.list
        .map((x) => x.validTill)
        .reduce((p, c) => {
          const pdate = moment(p, 'DD-MMM-YYYY').toDate();
          const cdate = moment(c, 'DD-MMM-YYYY').toDate();
          return pdate > cdate ? p : c;
        });
      this.productGroups = data.productGroups;
      this.form.setValue({
        validFrom: vf === null ? '' : moment(vf, 'DD-MMM-YYYY').toDate(),
        validTill: vt === null ? '' : moment(vt, 'DD-MMM-YYYY').toDate(),
        productGroup: '',
      });
      this.data.next(data.list);
    });
  }

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

  filterValidFrom(val: Date) {
    this.validFromFilter.next(val);
  }

  filterValidTill(val: Date) {
    this.validTillFilter.next(val);
  }
}