import { LanguageService } from './language.service';
import { Component, OnInit } from '@angular/core';
import { DashboardService } from '../dashboard/dashboard.service';

@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.css']
})
export class LanguageComponent implements OnInit {

  languages: any;
  existError = false;
  textError = '';
  editMode = false;
  showIndex = -1;

  constructor(
    private languageService: LanguageService,
    private dashboardService: DashboardService
  ) { }

  ngOnInit() {
    this.dashboardService.updateMenuPosition(9);
    this.fetchLanguages();
  }

  fetchLanguages() {
    this.languageService.getLanguages()
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.languages = aux.languages;
      }
    });
  }

  onSave(langid: string, langen: string, langes: string) {
    if (langid === '' || langen === '' || langes === '') {
      this.existError = true;
      this.textError = '* Campos vacios';
    } else {
      this.existError = false;
      this.languageService.saveLanguage(langid, 'en', langen)
      .subscribe(data => {
        const aux: any = data;
        if (aux.resp) {
          this.languageService.saveLanguage(langid, 'es', langes)
          .subscribe(() => {
            this.fetchLanguages();
            this.editMode = false;
            this.languageService.createFiles()
            .subscribe();
          });
        }
      });
    }
  }

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior:"smooth"});
  }

  updateIndex(ind) {
    if (this.showIndex === ind) {
      this.showIndex = -1;
    } else {
      this.showIndex = ind;
    }
  }

  delete(id: string){
    this.languageService.deleteLanguage(id)
    .subscribe(() => {
      this.fetchLanguages();
      this.showIndex = -1;
    });
  }

}