import { DashboardService } from './../dashboard/dashboard.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { api } from '../../../config';
import { IndexService } from './index.service';
import { NgForm } from '@angular/forms';

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

  @ViewChild('indexForm', { static: true }) form: NgForm;

  backuri = api.ADMIN_URL_BACK;
  headerText = '';
  lineText = '';
  bottonText = '';
  uploadedFiles: Array <File> = [];
  showMessage = false;
  text = '';
  logourl = '';

  constructor(
    private indexService: IndexService,
    private dashboardService: DashboardService,
  ) { }

  ngOnInit() {
    this.dashboardService.updateMenuPosition(2);
    this.indexService.getIndexData('headerText')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.headerText = aux.indexText;
        this.form.controls.encabezado_1.setValue(this.headerText);
        this.indexService.getIndexData('lineText')
        .subscribe(data1 => {
          const aux1: any = data1;
          if (aux1.resp) {
            this.lineText = aux1.indexText;
            this.form.controls.texto_1.setValue(this.lineText);
            this.indexService.getIndexData('bottonText')
            .subscribe(data2 => {
              const aux2: any = data2;
              if (aux2.resp) {
                this.bottonText = aux2.indexText;
                this.form.controls.boton_1.setValue(this.bottonText);
              }
            });
          }
        });
      }
    });

    this.fetchLogo();
  }

  fetchLogo() {
    this.indexService.getPicture('mainlogo')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.logourl = aux.logo.url;
      }
    });
  }

  onKeyUp(event: any) {
    this.headerText = event.target.value;
    this.indexService.setIndexData('headerText', this.headerText)
    .subscribe();
  }

  onKeyUp1(event: any) {
    this.lineText = event.target.value;
    this.indexService.setIndexData('lineText', this.lineText)
    .subscribe();
  }

  onKeyUp2(event: any) {
    this.bottonText = event.target.value;
    this.indexService.setIndexData('bottonText', this.bottonText)
    .subscribe();
  }

  fileChange(element) {
    this.uploadedFiles = element.target.files;
    let formData = new FormData();
    for ( let i = 0; i < this.uploadedFiles.length; i++) {
      formData.append('uploads[]', this.uploadedFiles[i], this.uploadedFiles[i].name);
    }
    if (this.uploadedFiles.length > 0) {
      const extension = this.uploadedFiles[0].name.substring(this.uploadedFiles[0].name.length - 3).toLowerCase();
      if (extension !== 'jpg' && extension !== 'png' && extension !== 'svg') {
        this.showMessage = true;
        this.text = 'Solo imagenes JPG, PNG o SVG';
      } else {
        this.showMessage = false;
        this.indexService.updatePicture('mainlogo', extension, formData)
        .subscribe(() => {
          this.fetchLogo();
        });
      }
    }
  }

}