import { Component, OnInit } from '@angular/core';
import { NodeCompatibleEventEmitter } from 'rxjs/internal/observable/fromEvent';
import { Tab1Service } from '../tab1/tab1.service'
import { Discoteca } from '../discoteca'
import { IonSlides} from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { ViewChild } from '@angular/core';
import { Evento } from '../evento';
import { Router } from '@angular/router';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';

@Component({
  selector: 'app-perfil-discoteca',
  templateUrl: './perfil-discoteca.page.html',
  styleUrls: ['./perfil-discoteca.page.scss'],
})
export class PerfilDiscotecaPage implements OnInit {

  @ViewChild('IonSlides') slides: IonSlides;
  nombre: string;
  telefono: number;
  localizacion: string;
  fotoSrc: string;
  fotoLoaded: string;
  someURL: string;
  editDisabled: string;
  editEnabled: string;
  galeriaFotos: string[];
  galeriaFake: string[];
  currentIndex: number;
  eventos: Evento[];
  alertCtrl: AlertController;

  constructor(private tab1Service: Tab1Service, private router: Router) {

  }

  ngOnInit(){
    this.initValues();
  }

  initValues(): void{
    this.getNombre();
    this.getTelefono();
    this.getLocalizacion();
    this.getEventos();
    this.editDisabled="true";
    this.editEnabled="false";
    this.fotoSrc = '../assets/barraca.jpg';
    this.fotoLoaded = this.fotoSrc;
    this.galeriaFotos = [];

  }


  getNombre(): void{
    this.nombre = this.tab1Service.getNombre();
  }

  getTelefono(): void{
    this.telefono = this.tab1Service.getTelefono();
  }

  getLocalizacion(): void{
    this.localizacion = this.tab1Service.getLocalizacion();
  }

  getEventos(): void{
    this.eventos = this.tab1Service.getEventos();
  }

  cargarImagen(){
      this.fotoSrc = this.someURL;
  }

  addGaleria(){
     this.galeriaFotos.push(this.someURL); 
     this.slides.update();



  }

  loadImageFromDevice(event): void{

    const file = event.target.files[0];

    let blobURL: string;
  
    const reader = new FileReader();
  
    reader.readAsDataURL(file);
  
    reader.onload = () => {

      let blob: Blob = new Blob([new Uint8Array((reader.result as ArrayBuffer))]);
      let blobURL = URL.createObjectURL(blob); 
      this.someURL = reader.result as string;
      if (event.target.id=="file-input-perfil")
        this.cargarImagen();
      else if (event.target.id=="file-input-galeria")
        this.addGaleria();
        
    };
  

  };


  enableEdit(){
    this.editDisabled="false";
    this.editEnabled="true";
    let cajaDatos = document.getElementById("cajaDatos");
    cajaDatos.style.background="white";
    cajaDatos.style.color="black";
    let botones = document.getElementById("botonesHidden1");
    botones.style.display = "block";
    botones = document.getElementById("botonesHidden2");
    botones.style.display = "block";

 

  }

  disableEdit(){
    this.editDisabled="true";
    this.editEnabled="false";
    let cajaDatos = document.getElementById("cajaDatos");
    cajaDatos.style.background="inherit";
    cajaDatos.style.color="inherit";
    let botones = document.getElementById("botonesHidden1");
    botones.style.display = "none";
    botones = document.getElementById("botonesHidden2");
    botones.style.display = "none";


  }

  saveEdit(){
    this.fotoLoaded = this.fotoSrc;
    this.disableEdit();
    
  }

  cancelEdit(){
    if(this.fotoLoaded)
      this.fotoSrc = this.fotoLoaded;
    this.disableEdit();}

  borrarDeGaleria(){
    this.galeriaFotos.splice(this.currentIndex, 1);

  }

  onSlideChanged() {
    this.slides.getActiveIndex().then(index =>{
        this.currentIndex = index;}
    );
    
    this.slides.update();
} 

addEvento() {
  this.router.navigate(['/tabs/tab1/tab1/prompt-evento']);
}
}