import { Component, OnInit, ViewChild } from '@angular/core';
import { AuditMetadata } from '../models/audit-metadata';
import { MatDialog } from '@angular/material';
import { NewAuditOptionsComponent } from '../new-audit-options/new-audit-options.component';
import { DARSState } from '../store/state';
import { Store } from '@ngrx/store';
import { GlobalState } from '@app/core/state';
import * as selectors from '../store/selectors';
import { Observable } from 'rxjs';
import * as darsActions from '../store/actions';
import { Audit } from '../models/audit';
import { DarsApiService } from '../services/api.service';

@Component({
  selector: 'cse-dars-view',
  templateUrl: './dars-view.component.html',
  styleUrls: ['./dars-view.component.scss'],
})
export class DARSViewComponent implements OnInit {
  public metadataStatus$: Observable<DARSState['metadata']['status']>;
  public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
  public audit$: Observable<Audit | null>;

  constructor(
    private store: Store<GlobalState>,
    public dialog: MatDialog,
    private api: DarsApiService,
  ) {}

  public ngOnInit() {
    this.store.dispatch(new darsActions.StartLoadingMetadata());
    this.metadataStatus$ = this.store.select(selectors.metadataStatus);
    this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
    // this.audit$ = this.store.select(selectors.visibleAudit);
    this.audit$ = this.api.getAudit(3);
  }

  public openNewAuditOptionsDialog() {
    this.dialog.open(NewAuditOptionsComponent, {});
  }

  public openAudit(metadata: AuditMetadata) {
    this.store.dispatch(new darsActions.StartLoadingAudit(metadata));
  }

  public closeAudit() {
    this.store.dispatch(new darsActions.CloseAudit());
  }
}