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, Router } from '@angular/router';
import * as moment from 'moment';

import { BalanceSheet } from './balance-sheet';
import { BalanceSheetDataSource } from './balance-sheet-datasource';

@Component({
  selector: 'app-balance-sheet',
  templateUrl: './balance-sheet.component.html',
  styleUrls: ['./balance-sheet.component.css'],
})
export class BalanceSheetComponent implements OnInit {
  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort?: MatSort;
  info: BalanceSheet = new BalanceSheet();
  dataSource: BalanceSheetDataSource = new BalanceSheetDataSource(this.info.body);
  form: FormGroup;
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['group', 'name', 'subAmount', 'total'];

  constructor(private route: ActivatedRoute, private router: Router, private fb: FormBuilder) {
    this.form = this.fb.group({
      date: '',
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { info: BalanceSheet };

      this.info = data.info;
      this.form.setValue({
        date: moment(this.info.date, 'DD-MMM-YYYY').toDate(),
      });
    });
    this.dataSource = new BalanceSheetDataSource(this.info.body, this.paginator, this.sort);
  }

  show() {
    const date = this.getDate();
    this.router.navigate(['balance-sheet', date]);
  }

  getDate(): string {
    const formModel = this.form.value;
    return moment(formModel.date).format('DD-MMM-YYYY');
  }
}