import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ImagesService } from 'src/app/services/images.service';

import { Image } from 'src/app/models/typedefs';
import { flatMap, filter } from 'rxjs/operators';

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

	public image : Image;

	public funciones : boolean = false;
	public entradas : boolean = false;
	public tiempo : boolean = false;
	public teatro : boolean = false;

	constructor(
		private route : ActivatedRoute,
		private router : Router,
		private images : ImagesService
	) {}

	ngOnInit(): void {
		this.route.paramMap.pipe(
			/** foreach entry (which is only one) of paramMap **/
			flatMap(
				/**
				 * Produce a new observable of images where you filter by the name parameter
				 * O(images), reduce to O(1) with a Map structure in ImagesService
				 */
				param => this.images.getImages().pipe(
					filter( (i : Image) => i.name === decodeURIComponent(param.get('name')) )
				)
			)
		)
		/** subscribe to it and receive the image to know its values **/
		.subscribe( (i : Image) => this.image = i );
	}

	showInfo(show : string) {
		this.funciones = this.teatro = this.tiempo = this.entradas = false;
		switch (show) {
			case "Funciones":
				this.funciones = true;
				break;
			case "Entradas":
				this.entradas = true;
				break;
			case "Tiempo":
				this.tiempo = true;
				break;
			case "Teatro":
				this.teatro = true;
				break;
		}
	}

}