import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Router } from '@angular/router';

import { Unposted } from './unposted';
import { UnpostedDataSource } from './unposted-datasource';
import { UnpostedService } from './unposted.service';

@Component({
  selector: 'app-unposted',
  templateUrl: './unposted.component.html',
  styleUrls: ['./unposted.component.css'],
})
export class UnpostedComponent implements OnInit {
  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort?: MatSort;
  info: Unposted[] = [];
  dataSource: UnpostedDataSource = new UnpostedDataSource(this.info);
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = [
    'date',
    'voucherType',
    'narration',
    'debitName',
    'debitAmount',
    'creditName',
    'creditAmount',
  ];

  panelOpenState = false;
  unposted: boolean | undefined = undefined;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private ser: UnpostedService,
  ) {}

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

      this.info = data.info;
    });
    this.dataSource = new UnpostedDataSource(this.info, this.paginator, this.sort);
  }

  refresh() {
    this.ser.list().subscribe((info: Unposted[]) => {
      this.info = info;
    });
  }

  toggleUnposted() {
    if (this.unposted === undefined) {
      this.unposted = false;
    } else if (!this.unposted) {
      this.unposted = true;
    } else {
      this.unposted = undefined;
    }
  }
}