import { Component, AfterContentInit, Input } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { AudioPlayerService } from '../../services/audio-player.service';

@Component({
  selector: 'sermon-small-component',
  templateUrl: './sermon-small.component.html',
  styleUrls: ['./sermon-small.component.css'],
  animations:[
      trigger("inout",[
        state("1", style({ opacity: '1', transform:'translateX(0)' })),
        state("0",style({ opacity: '0', transform:'translateX(5%)' })),
        transition('* => 1',[
            animate('500ms ease-in-out')
        ]),
        transition(':enter',[
            animate('0ms')
        ])
      ])
  ]
})
export class SermonSmallComponent implements AfterContentInit {
    @Input()
    id: number;
    @Input()
    title: string;
    @Input()
    description: string;
    @Input()
    date: Date;
    @Input()
    author: string;
    @Input()
    url: string;
    public startFadeIn: boolean = false;
    @Input()
    public delayFadeIn: number = 100;

    constructor(private audioPlayer: AudioPlayerService){

    }

    play(): void{        
        if (this.audioPlayer.getIsPlaying() == true && this.audioPlayer.getMetaData() != null && this.audioPlayer.getMetaData().id == this.id){
            this.audioPlayer.pause();
        } else {
            if (this.audioPlayer.getMetaData() != null && this.audioPlayer.getMetaData().id == this.id){
                this.audioPlayer.resume();
            } else {
                this.audioPlayer.play(this.url,{id:this.id,title:this.title,author:this.author});
            }            
        }        
    }

    ngAfterContentInit(): void{
        setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
    }
}