import { Component, ViewChild, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

import {RemoveProjectsComponent} from './remove-projects.component';
import {AddProjectsComponent} from './add-projects.component';

@Component({
    selector: 'manage-projects',
    template: `
      <div id="manage-projects">
        <div class="menubar uk-margin-bottom ">
          <a *ngIf="!toggle" (click)="updateCommunityProjects()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>
          <div class="manage-projects-title uk-text-large">{{pageTitle}}</div>
        </div>

        <div class="toggle-usage">
          <remove-projects (communityProjectsChanged)="communityProjectsChanged($event)"></remove-projects>
          <fab (clicked)="updateCommunityProjects()" uk-toggle="target: .toggle-usage"></fab>
        </div>
        <div class="toggle-usage" hidden>
          <!-- (updateCommunityProjects)="updateCommunityProjects($event)" -->
          <add-projects [(communityProjects)]="communityProjects"></add-projects>
        </div>
      </div>
    `
})

export class ManageProjectsComponent implements OnInit {
  private community: string = '';

  @Input() communityProjects =[];
  @ViewChild (RemoveProjectsComponent) removeProjectsComponent : RemoveProjectsComponent ;
  @ViewChild (AddProjectsComponent) addProjectsComponent : AddProjectsComponent ;

  public warningMessage = "";
  public infoMessage = "";

  public toggle: boolean = true;
  public updateCommunityProjectsOnToggle: boolean = false;
  public pageTitle: string = "Manage projects";
  public toggleLinkMessage: string = "Manage projects";

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      if(params['communityId']) {
        this.community = params['communityId'];
      }
    });
  }

  constructor(private route: ActivatedRoute) {}

  public ngOnDestroy() {}

  public updateCommunityProjects() {
    this.toggle = !this.toggle;
    if(this.toggle) {
      this.pageTitle = "Manage projects";
      // this.toggleLinkMessage = "Missing projects?";

      //if(this.updateCommunityProjectsOnToggle) {
        this.removeProjectsComponent._getCommunityProjects();
        this.addProjectsComponent.undo = {};
      //}
    } else {
      this.updateCommunityProjectsOnToggle = false;
      this.pageTitle = "Search projects";
      //this.toggleLinkMessage = "Manage projects";
    }
  }

  public communityProjectsChanged($event) {
    this.communityProjects = $event.value;
  }

  // public updateCommunityProjects($event) {
  //   this.updateCommunityProjectsOnToggle = true;
  // }
}