import { StartSendingAudit } from './../store/actions';
import { MediaMatcher } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core';
import { AuditMetadata } from '../models/audit-metadata';
import { MatDialog } from '@angular/material';
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/audit';
import { DarsApiService } from '../services/api.service';
import { Alert } from '@app/core/models/alert';
import {
  NewDegreeAuditDialogComponent,
  NewDegreeAuditFields,
} from '../new-degree-audit-dialog/new-degree-audit-dialog.component';
import {
  NewWhatIfAuditDialogComponent,
  NewWhatIfAuditFields,
} from '../new-what-if-audit-dialog/new-what-if-audit-dialog.component';

@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 programMetadata$: Observable<AuditMetadata[]>;
  public whatIfMetadata$: Observable<AuditMetadata[]>;
  public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
  public audit$: Observable<Audit | null>;
  public mobileView: MediaQueryList;
  public alerts$: Observable<Alert[]>;

  constructor(
    private store: Store<GlobalState>,
    public dialog: MatDialog,
    public mediaMatcher: MediaMatcher,
    private api: DarsApiService,
  ) {
    this.mobileView = mediaMatcher.matchMedia('(max-width: 959px)');
  }

  public ngOnInit() {
    this.store.dispatch(new darsActions.StartLoadingMetadata());
    this.metadataStatus$ = this.store.select(selectors.metadataStatus);
    this.programMetadata$ = this.store.select(selectors.programMetadata);
    this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
    this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
    this.audit$ = this.store.select(selectors.visibleAudit);
    this.alerts$ = this.store.select(selectors.alerts);
  }

  public onDismissAlert(key: string) {
    this.store.dispatch(new darsActions.DismissAlert({ key }));
  }

  public openDegreeAuditDialog() {
    this.dialog
      .open<any, any, NewDegreeAuditFields>(NewDegreeAuditDialogComponent)
      .afterClosed()
      .subscribe(event => {
        if (event) {
          return this.store.dispatch(
            new StartSendingAudit({
              darsInstitutionCode: event.darsInstitutionCode,
              darsDegreeProgramCode: event.darsDegreeProgramCode,
            }),
          );
        }
      });
  }

  public openWhatIfAuditDialog() {
    this.dialog
      .open<any, any, NewWhatIfAuditFields>(NewWhatIfAuditDialogComponent)
      .afterClosed()
      // .subscribe(event => console.log(event));
      .subscribe(event => {
        if (event) {
          return this.store.dispatch(
            new StartSendingAudit({
              darsInstitutionCode: event.darsInstitutionCode,
              darsDegreeProgramCode: event.darsDegreeProgramCode,
              degreePlannerPlanName: event.degreePlannerPlanName,
              whichEnrolledCoursesIncluded: event.whichEnrolledCoursesIncluded,
            }),
          );
        }
      });
  }

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

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

  public openNewTab() {
    window.open(window.location.href, '_blank', 'noopener noreferrer');
  }
}