import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { DarsApiService } from '../services/api.service';
import { Audit } from '../models/audit';

@Component({
  selector: 'cse-dars-view',
  templateUrl: './dars-view.component.html',
  styleUrls: ['./dars-view.component.scss'],
})
export class DARSViewComponent {
  displayedColumns = [
    'view',
    'school',
    'program',
    'honors',
    'plan',
    'status',
    'download',
  ];

  dataSource = [
    {
      pending: true,
      school: 'Letters & Science',
      program: 'Psychology',
      honors: 'keep',
      plan: 12345,
    },
    {
      pending: false,
      school: 'Letters & Science',
      program: 'Psychology',
      honors: 'keep',
      plan: 12345,
    },
    {
      pending: false,
      school: 'Letters & Science',
      program: 'Psychology',
      honors: 'keep',
      plan: 12345,
    },
    {
      pending: false,
      school: 'Letters & Science',
      program: 'Psychology',
      honors: 'keep',
      plan: 12345,
    },
  ];

  @ViewChild('auditSideNav') auditSideNav: MatSidenav;

  public isLoading: boolean;
  public auditId: number | null;
  public audit: Audit;

  constructor(private api: DarsApiService) {
    this.isLoading = false;
    this.auditId = null;
  }

  public openAudit(auditId: number) {
    // if user is loading a new audit
    if (auditId !== this.auditId) {
      this.isLoading = true;
      this.auditId = null;

      this.api
        .getAudit(auditId)
        .toPromise()
        .then(audit => {
          this.isLoading = false;
          this.auditId = auditId;
          this.audit = audit;

          console.log(audit);
        })
        .catch(e => {
          console.log(e);
        });
    }
    this.auditSideNav.open();
  }
}