import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { EventDetails } from '../event-details';
import { SearchFormService } from '../search-form.service';
import { Venue } from '../venue';
import { VenueMapModalComponent } from '../venue-map-modal/venue-map-modal.component';



@Component({
  selector: 'app-event-detail',
  templateUrl: './event-detail.component.html',
  styleUrls: ['./event-detail.component.css']
})
export class EventDetailComponent {
  @Input() eventDetails!: EventDetails;
  @Input() venueDetails!: Venue;
  @Input() eventLoaded: boolean = false;
  @Input() venueLoaded: boolean = false;
  @Output() messageBack = new EventEmitter<void>();

  constructor(private matDialog: MatDialog, private searchFormService: SearchFormService) { }

  isFavorite: boolean = false;

  showOpenHours: boolean = false;
  showGeneralRule: boolean = false;
  showChildRule: boolean = false;

  ngOnChanges(changes: SimpleChanges){
    if(changes['eventLoaded'] && changes['eventLoaded'].currentValue){
      this.checkFav();
    }
  }

  backToEventTable(): void {
    this.showOpenHours = false;
    this.showGeneralRule = false;
    this.showChildRule = false;
    this.messageBack.emit();
  }

  combineStrings(array: string[]): string {
    var res = '';
    for (var i = 0; i < array.length - 1; i++) {
      res += (array[i] + ' | ');
    }
    res += array[array.length - 1];
    return res;
  }

  stringToUrlComponent(s: string): string {
    let res = encodeURIComponent(s);
    return res;
  }

  openMap(venueAddress: string) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.hasBackdrop = false;
    this.searchFormService.getGoogleLocation(venueAddress)
      .subscribe((location: any)=>{
        dialogConfig.data = location;
        this.matDialog.open(VenueMapModalComponent, dialogConfig)
      })
  }

  addFav(){
    this.isFavorite = true;
    var fav = {
      id: this.eventDetails.id,
      name: this.eventDetails.name,
      date: this.eventDetails.date,
      category: this.combineStrings(this.eventDetails.genres),
      venue: this.eventDetails.venue
    };
    var favorites: any[];
    const localFav = localStorage.getItem('favorites');
    if(localFav === null){
      favorites = [];
      favorites.push(fav);
      localStorage.setItem('favorites', JSON.stringify(favorites));
    }else{
      favorites = JSON.parse(localFav);
      favorites.push(fav);
      localStorage.setItem('favorites', JSON.stringify(favorites));
    }
    alert('Event Added to Favorites');
  }

  cancelFav(){
    this.isFavorite = false;
    var favorites: any[];
    const localFav = localStorage.getItem('favorites');
    if(localFav !== null){
      favorites = JSON.parse(localFav);
      for(var i=0; i<favorites.length; i++){
        if(favorites[i].id == this.eventDetails.id){
          favorites.splice(i, 1);
          break;
        }
      }
      localStorage.setItem('favorites', JSON.stringify(favorites));
    }
    alert('Removed from Favorites!');
  }

  checkFav(){
    var favorites: any[];
    const localFav = localStorage.getItem('favorites');
    if(localFav !== null){
      favorites = JSON.parse(localFav);
      for(var fav of favorites){
        if(fav.id == this.eventDetails.id){
          this.isFavorite = true;
          return;
        }
      }
      this.isFavorite = false;
    }else{
      this.isFavorite = false;
    }
  }
}