import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { NavComponent } from "../../nav/nav.component";
import { IssueService } from "../../issue.service";
import { ServerDataService } from '../../server-data.service';
import { AuthenticationService } from '../../authentication.service';
import { environment } from './../../../environments/environment';

@Component({
  selector: 'app-issue',
  templateUrl: './issue.component.html',
  styleUrls: ['./issue.component.css']
})
export class IssueComponent implements OnInit {
  /** Based on the screen size, switch from standard to one column per row */
  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return [

          { title: 'Issue Details', cols: 1, rows: 1 }

        ];
      }

      return [

        { title: 'Issue Details', cols: 2, rows: 1 }

      ];


    })
  );

  issueData: any;
  issueID: string;
  header: any;
  userID: string = "";
  public confirm: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver, private http: HttpClient,
              private issue: IssueService, private dataService: ServerDataService,
              private nav: NavComponent, private authenticationService: AuthenticationService)
  {
    this.issueID = "";
  }

  ngOnInit()
  {
    let auth = this.authenticationService.authHeader.get('Authorization') || "NA NA";

    this.issue.currentIssue.subscribe((id: string) => {
      this.issueID = id;
      console.log(this.issueID);


    this.header = new HttpHeaders()
          .set('Content-Type', 'application/json')
          .set('issueID', id)
          .set('Authorization', auth);

    this.http.get(environment.ip + '/issueData', {headers: this.header})
    .subscribe( (data:any) => {
      this.issueData = data;
      console.log(this.issueData);
    });

    this.authenticationService.user.subscribe( (result: string) => {
      this.userID = result;
    });

  });

  }

  setConfirm(change: boolean) {
    this.confirm = change;
  }

  resolveIssue(id: string) {
    let auth = this.authenticationService.authHeader.get('Authorization') || "NA NA";
    this.header = new HttpHeaders()
          .set('Content-Type', 'application/json')
          .set('issueID', id)
          .set('status', 'Done')
          .set('Authorization', auth);

    this.http.get(environment.ip + '/changeStatus', {headers: this.header})
    .subscribe( (data:any) => {
      console.log(data);
      this.dataService.getDataFromServer();
    });
  }

  gotoVM(vm: any, vmLink: string) {
    if(vm.ownerID == this.userID) {
      alert("Opening VM: " + vmLink);
    }
    else {
      alert("You do not have a reservation for this VM");
    }

  }

}