import { Component, OnInit } from '@angular/core';
import { Tab1Service } from '../tab1/tab1.service';
import { IonSlides, ModalController} 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';
import { GaleriamodalPage } from '../galeriamodal/galeriamodal.page';
import { stringify } from '@angular/compiler/src/util';

@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;
  descripcion: string;
  fotoSrc: string;
  fotoLoaded: string;
  someURL: string;
  editDisabled: string;
  editEnabled: string;
  galeriaFotos: string[];
  currentIndex: number;
  eventos: Evento[];
  alertCtrl: AlertController;
  sliderOpts = {
      slidesPerView: 1.5,
      centeredSlides: true,
  };

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

  }

  ngOnInit(){
    this.initValues();
  }

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

  }


  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();
  }

  getDescripcion(): void{
    this.descripcion = this.tab1Service.getDescripcion();
  }

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

  addGaleria(){
    this.tab1Service.galeria.push(this.someURL);
    this.galeriaFotos = this.tab1Service.galeria;
    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";
    cajaDatos.contentEditable = "true";
    let botones = document.getElementById("botonesHidden1");
    botones.style.display = "block";
    let saveButton = document.getElementById("saveButton") as HTMLButtonElement;
    saveButton.disabled=false;
    let cancelButton = document.getElementById("cancelButton") as HTMLButtonElement;
    cancelButton.disabled=false;


 

  }

  disableEdit(){
    this.editDisabled="true";
    this.editEnabled="false";
    let cajaDatos = document.getElementById("cajaDatos");
    cajaDatos.style.background="inherit";
    cajaDatos.style.color="inherit";
    cajaDatos.contentEditable="false";
    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.tab1Service.editarEvento=false;
    this.router.navigate(['/tabs/tab1/prompt-evento']);
}

  mostrarEvento(evento: Evento){
    this.tab1Service.eventoIndex = this.eventos.indexOf(evento);
    this.router.navigate(['/tabs/tab1/view-evento']);
}

  editarEvento(evento: Evento){
    this.tab1Service.eventoIndex = this.eventos.indexOf(evento);
    this.tab1Service.editarEvento = true;
    this.router.navigate(['/tabs/tab1/prompt-evento']);
}

  openPreview(foto: string){
      this.modalController.create({
        component: GaleriamodalPage,
        componentProps: {
          foto: foto
        }
      }).then(modal=>modal.present());
  }
}