import { Component, OnInit, ElementRef } from '@angular/core';
import { EmployeeWizardService } from '../employee-wizard.service';
import { LocalStorageService } from 'angular-2-local-storage';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { ComponentList } from 'app/models/employee.model';
import { UserInfo } from 'app/models/userInfo.model';
import { PlatformHttpService } from 'app/services/platform/platform-http.service';
import { ComponentPlatformResponse } from 'app/models/conponent-platform.model';



@Component({
  selector: 'app-employee-wizard-platform',
  templateUrl: './employee-wizard-platform.component.html',
  styleUrls: ['./employee-wizard-platform.component.css']
})
export class EmployeeWizardPlatformComponent implements OnInit {
  listCards: {
    frontend: ComponentPlatformResponse[],
    backend: ComponentPlatformResponse[]
  };
  userInfo: UserInfo;

  constructor(private employeeWizardService: EmployeeWizardService,
    private platformService: PlatformHttpService) {
    this.listCards = { frontend: [], backend: [] };
  }

  public valueLeftContentSlide: number;
  ngOnInit() {
    this.employeeWizardService.setCurrentPage(2);

    this.valueLeftContentSlide = 0;

    this.platformService.getComponentCatalogFromPlatform()
      .subscribe(comp => {
        this.listCards.frontend = comp.filter(c => c.catagory === 'ui');

        this.listCards.backend = comp.filter(c => c.catagory === 'server');
      });
  }
  slideArrow(direction, elementContent: HTMLElement, event: UIEvent) {

    let left = parseInt(elementContent.style.left, 0);
    left = isNaN(left) ? 0 : left;
    if (direction === 'right') {

      elementContent.style.left = left + 100 + 'px';

    } else if (direction === 'left') {
      elementContent.style.left = left - 100 + 'px';
    }
    this.valueLeftContentSlide = parseInt(elementContent.style.left, 0);
  }
  scrollSwipe(event: UIEvent) {
    console.log(event.returnValue);
  }
}
