import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthenticationService } from 'src/app/authentication.service';
import { ServerDataService } from '../../server-data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [AuthenticationService]
})
export class HomeComponent 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: 'Product Name', cols: 1, rows: 1 }

        ];
      }

      return [

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

      ];
    })
  );

  public vms: any;

  constructor(private breakpointObserver: BreakpointObserver, public authenticationService: AuthenticationService,
              private http: HttpClient, private dataService: ServerDataService) {}

  ngOnInit() {
    this.dataService.vmList
    .subscribe( (data:any) => {
      this.vms = data;
    });
  }
}