import {
  Component,
  Input,
  AfterViewInit,
  Output,
  EventEmitter,
  OnChanges,
  SimpleChange,
  OnInit
} from '@angular/core';
import {ProjectManagerService} from './projectmanager.service';
import {AppConstants} from '../shared/app.constants';
import {WorkspaceService} from '../workspace';
import {FrameworkLibraryService} from 'angular2-json-schema-form';
import {Router, ActivatedRoute} from '@angular/router';

@Component({selector: 'project-manager', templateUrl: './projectmanager.component.html'})

export class ProjectManagerComponent implements AfterViewInit,
OnInit,
OnChanges {

  /* --- Decalrations Starts ---  */
  // Tree view nodes input
  nodes : any;
  formSchema : any;
  layoutSchema : any;
  schemaData : any;
  btnText : string;
  projects : Array < any > = new Array < any > ();
  selectedProject : number = 0;
  globalSettings : any;

  //Options input from tree view component
  @Input()options : Object = {};

  //Template type input
  @Input()templateType : string;

  //Event triggeredafter the node selected
  @Output()nodeSchema : EventEmitter < any > = new EventEmitter();

  /* --- Decalrations End ---*/

  /*
  * treeviewSercice: Tree view service instance
  * workspaceService: Workspace service instance
  ***************************************************************/
  constructor(private projectManagerService : ProjectManagerService, private workspaceService : WorkspaceService, private frameworkLibrary : FrameworkLibraryService, private route : ActivatedRoute, private router : Router) {
    this.options = Object.assign({}, this.projectManagerService.defaultTreeOptions(), this.options)
    this.globalSettings = {
      addSubmit: false
    };
    frameworkLibrary.setFramework('material-design', true);
    this.workspaceService.projects.subscribe((project : any) => {
        this.projects.push(project.project);
        this.onProjectSelection(project.project, (this.projects.length - 1));
      });
  }

  /*
  * On changes lifehook
  * For track the component input changes
  ***************************************************************/
  ngOnChanges(changes : {
    [propKey : string]: SimpleChange
  }) {
    for (let propName in changes) {
      if (propName == "options" && this.options) {
        this.options = Object.assign({}, this.projectManagerService.defaultTreeOptions(), this.options)
      }
    }
  }

  ngOnInit() {
    this.route.params.subscribe((params : any) => {
        let tt = params['type'];
        if (tt) {
          this.templateType = tt;
          this.workspaceService.openProject(tt);
        }
      });
  }

  /*
  * AfterViewInit life hook
  ***************************************************************/
  ngAfterViewInit() {
    // Call the tree node generate service
    setInterval(() => {
      window.focus()
    }, 300)
  }

  /*
  * Project selected event - update the tree view
  ***************************************************************/
  onProjectSelection(project : any, index : number) {
    this.selectedProject = index;
    this.updateTreeView(project.type, project.template);    
  }

  /*
  * Remove a project from the collection
  ***************************************************************/
  onRemoveProject(project : any, index : number) {
    this
      .projects
      .splice(index, 1);

    if (this.projects.length > 0) {
      this.onProjectSelection(this.projects[0], 0);
    }
  }

  /*
  * Tree node selection event
  ***************************************************************/
  onTreeFocusEvent(event : any) {
    let schema = event.node.data['schema-data'];
    if (schema) {
      this.formSchema = schema;

      if (event.node.data['schema-layout']) {
        this.layoutSchema = event.node.data['schema-layout'];
      } else {
        this.layoutSchema = ['*']
      }
    }
  }

  /*
  * Update the tree view based on the template
  ***************************************************************/
  updateTreeView(templateType : string, templateFile : string) {
    this
      .projectManagerService
      .getTreeViewSchema(templateType, templateFile, (responce : any) => {
        this.nodes = responce;
        this.schemaData = responce.schemaData;
      });

  }

  yourOnChangesFn(event : any) {
    console.log(event);
  }
}