import { Component } from '@angular/core';
import { Event } from '../event'
import { EventDetails } from '../event-details';
import { EventDetailsService } from '../event-details.service';
import { Venue } from '../venue';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {

  constructor(private eventDetailsService: EventDetailsService) { }

  eventsRes: Event[] = [];
  hasRes: boolean = false;
  noRes: boolean = false;
  showDetail: boolean = false;
  eventLoaded: boolean = false;
  venueLoaded: boolean = false;
  eventDetails!: EventDetails;
  venueDetails!: Venue;

  receiveEvents(events: Event[]) {
    this.showDetail = false;
    this.eventLoaded = false;
    this.venueLoaded = false;
    
    this.eventsRes = events;
    if (events.length > 0) {
      this.noRes = false;
      this.hasRes = true;
    } else {
      this.noRes = true;
      this.hasRes = false;
    }
  }

  receiveClear() {
    this.hasRes = false;
    this.noRes = false;
    this.eventsRes = [];
    this.showDetail = false;
    this.eventLoaded = false;
    this.venueLoaded = false;
  }

  receiveEventID(event: any) {
    this.eventLoaded = false;
    this.venueLoaded = false;
    this.showDetail = true;
    this.eventDetailsService.getEventDetail(event.id)
      .subscribe((details: EventDetails) => {
        this.eventDetails = details;
        this.eventLoaded = true;
      })
    this.eventDetailsService.getVenueDetail(event.venue)
      .subscribe((details: Venue) => {
        this.venueDetails = details;
        this.venueLoaded = true;
      })
  }

  receiveBack() {
    this.showDetail = false;
  }
}