import { InnovationHttpService } from 'app/services/innovation/innovation-http.service';
import { Idea } from 'app/models/InnovationIdea.model';
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { InnovationIdeaDetailsResponse } from 'app/models/InnovationIdea.model';
import { SandboxDetails, DirectoryBundleResponse } from 'app/models/directory-bundle-model';
import { AuthService } from 'app/services/auth.service';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { LocalStorageService } from 'angular-2-local-storage';
import { UserInfo } from 'app/models/userInfo.model';
import { SkillsResponse } from 'app/models/skills.model';

@Component({
  selector: 'app-innovation-tab',
  templateUrl: './innovation-tab.component.html',
  styleUrls: ['./innovation-tab.component.scss']
})

export class InnovationTabComponent implements OnInit, OnDestroy {
  private $destroyed = new Subject();
  currentUser: UserInfo;
  sandboxData: SandboxDetails[];

  mytaskview: Boolean;
  showArow: boolean;
  myfeedbackview: boolean;

  public tabs = [
    { id: 'innovation', name: 'My Innovations', ideaList: [], pocList: [] },
    { id: 'reviews', name: 'My Reviews', ideaList: [], pocList: [] }
  ];
  public selectedTab = this.tabs[0];

  constructor(
    private authService: AuthService,
    private innovationHttpService: InnovationHttpService,
    private localStorageService: LocalStorageService
  ) { }

  ngOnInit() {

    this.mytaskview = true;
    this.myfeedbackview = false;
    this.currentUser = this.localStorageService.get('userInfo') as UserInfo;
    Observable.zip(
      this.authService.getAllAwsDirectoryBundle(),
      this.authService.getAllSkill(),
      this.innovationHttpService.getAllInnovation())
      .takeUntil(this.$destroyed)
      .subscribe(response => {
        const skillsResp = response[1] as SkillsResponse,
          directoryBundle = response[0] as DirectoryBundleResponse;
        this.sandboxData = directoryBundle.pgAwsDirectoryBundleList
          .map(val => {
            return {
              bundleId: val.bundleId,
              directoryId: val.directoryId,
              title: val.pgSkillTrackMstr.skillTrackName,
              itemTecnologies: skillsResp.pgSkillTrackDtlsList
                .filter(skill => skill.pgSkillTrackMstr.skillTrackMstrId === val.pgSkillTrackMstr.skillTrackMstrId)
                .map(sel => sel.skillTrackDtlsName)
            } as SandboxDetails;
          });
        const data = response[2];
        data.ideasList.sort(function (a, b) {
          return b.createdDt - a.createdDt;
        });
        data.ideasList.forEach(innovation => {
          const typeName = innovation.poc && innovation.poc.length > 0 ? 'pocList' : 'ideaList';
          if (innovation.creator.id === this.currentUser.userInfoMstrId) {
            this.tabs[0][typeName].push(innovation);
          }
          if (innovation.reviewer.id === this.currentUser.userInfoMstrId) {
            this.tabs[1][typeName].push(innovation);
          }
        });
      });
  }

  hoverActive(card: HTMLElement) {
    card.classList.toggle('card-sandbox-hover-active');
    card.children.namedItem('inner-card-flow')
      .classList.toggle('card-sandbox-major-hover-active');
  }

  /**
  * Set active tab content
  *
  * @public
  * @param {*} tab
  * @memberof EmployeeDashboardHomeCTComponent
  */
  public setActive(tab: any): void {
    this.selectedTab = tab;
  }

  ngOnDestroy() {
    this.$destroyed.next();
    this.$destroyed.complete();
  }

  viewchange(view) {
    if (view === 'myfeedbackview') {
      this.mytaskview = false;
      this.myfeedbackview = true;
    } else {
      this.mytaskview = true;
      this.myfeedbackview = false;
    }
  }
}
