import { Component, OnInit, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';
import { Observable, Subject, Subscription } from 'rxjs';
import { CodeLayer } from '../core/model/code-layer.model';
import { CodeService } from '../core/services/code.service';
import { NavigationService } from '../core/services/navigation.service';


@Component({
  selector: 'app-code',
  templateUrl: './code.component.html'
})
export class CodeComponent implements OnInit, OnDestroy {

  public showCode: boolean;
  public focusOn: string;
  public focusDiv: boolean;
  public codeSections: any[];
  public codeSubscription: Subscription;
  public urlSubscription: Subscription;
  public location: string;


  constructor(private http: Http, private router: Router, private codeService: CodeService, private navigationService: NavigationService) {
    let a: any = this.router.url.split('/');
    if(a.length === 4) {
      this.focusOn = '_'+a[3].split('-').join('')+'_';
      this.focusDiv = true;
    }

    this.urlSubscription = this.navigationService.locationSubscription$.subscribe(x=> {
      let a: any = this.router.url.split('/');
      if(a.length === 4) {
        this.focusOn = '_'+a[3].split('-').join('')+'_';
        this.focusDiv = true;
      }
    });

    this.codeSections = this.codeService.getCodeLayers();
    if(!this.codeSections.length) {
      this.codeSubscription = this.codeService.codeSubscription$.subscribe(x=> {
        this.codeSections = this.codeService.getCodeLayers();
        this.showCode = true;
      });
    } else 

  }

  focusElement(e: Event) {
  console.log(e);
    this.focusOn = e.srcElement.getAttribute('data-layer');
    this.focusDiv = true;
  }

  ngOnInit() {
  }

  ngOnDestroy() {
    if(this.urlSubscription) this.urlSubscription.unsubscribe();
    if(this.codeSubscription) this.codeSubscription.unsubscribe();
  }

  removeFocus() {
    this.focusOn = null;
    this.focusDiv = false;
  }



}

{
      this.showCode = true;
    }