import { Component, OnDestroy, OnInit } from '@angular/core';
import { ApiService } from "../../services/api.service";
import {concatMap, interval, Observable, Subject} from "rxjs";
import { EventService } from "../../services/event.service";
import { filter, map, take, takeUntil, tap } from "rxjs/operators";
import { Participant } from "../../../types/participant";
import { animate, style, transition, trigger } from "@angular/animations";
import { getAudioPath, getAudioPathWithTemplate } from "../../helper/tts.helper";
import { VoiceService } from "../../services/voice.service";

@Component({
    selector: 'app-answer-notification',
    templateUrl: './answer-notification.component.html',
    styleUrls: ['./answer-notification.component.scss'],
    animations: [
        trigger(
            'inOutAnimation',
            [
                transition(
                    ':enter',
                    [
                        style({height: 0, opacity: 0}),
                        animate('0.5s ease-out',
                            style({height: '100%', opacity: 1}))
                    ]
                ),
                transition(
                    ':leave',
                    [
                        style({height: '100%', opacity: 1}),
                        animate('1s ease-in',
                            style({height: 0, opacity: 0}))
                    ]
                )
            ]
        ),
        trigger('counter', [
            transition('* => *', [
                style( {
                    opacity: 0,
                    bottom: '-100%',
                }),
                animate('0.3s', style( {
                    opacity: 0.9,
                    bottom: '0',
                }))
            ]),
        ])
    ]
})
export class AnswerNotificationComponent implements OnInit, OnDestroy {
    isShown = false;
    answerIsValid = false;
    countdown = 10;
    showCountdown = false;
    announceAudio = true;
    participants: Participant[] = [];
    audioSrc: string;
    private destroyed$ = new Subject<void>();
    constructor(private apiService: ApiService, private eventService: EventService, private voiceService: VoiceService) {
        this.eventService.answerReceivedEvent.pipe(
            takeUntil(this.destroyed$),
            map(e => e.data)
        ).subscribe(d => this.showNotification(d.telegramId, true, d.validAnswer, d.note));
        this.eventService.wrongAnswerEvent.pipe(
            takeUntil(this.destroyed$),
            map(e => e.data)
        ).subscribe(d => this.showNotification(d.telegramId, false, d.validAnswer, null));
        // this.eventService.scoreChangedEvent.pipe(
        //     takeUntil(this.destroyed$),
        //     map(e => e.data),
        // ).subscribe(e => {
        //    if(e.telegramId === this.participant.telegramId) {
        //        this.participant.score = e.newScore
        //    }
        // });


    }

    showNotification(telegramId: number, validAnswer: boolean, validAnswerValue: string, note: string|null) {
        console.log(`showNotification`);
        this.apiService.getParticipant(telegramId).subscribe(p => {
            this.countdown = validAnswer ? 10 : 5;
            this.participants.push(p);
            this.isShown = true;
            this.answerIsValid = validAnswer;
            const template = validAnswer ? 'announce-valid' : 'announce-invalid';
            const templateData: { [index: string]: string} = {};
            templateData['user'] =  p.name;
            templateData['answer'] = validAnswerValue;
            templateData['user-genitive'] = p.properties.genitive;
            if(this.participants.length === 1) {
                this.voiceService.playAudio(getAudioPathWithTemplate(template, '', templateData));
            }
            //this.voiceService.playAudio(getAudioPathWithTemplate(template, '', templateData));
            this.voiceService.audioEndedSubject.pipe(takeUntil(this.destroyed$), take(1)).subscribe(r => {
            if (note && validAnswer) {
                this.voiceService.playAudio(getAudioPath(note))
            }
            })

            this.showCountdown = true;
        })
    }

    countdownCompleted() {
        this.participants = [];
        console.log(`countdown-completed`);
        this.showCountdown = false;
        this.isShown = false;
        this.announceAudio = false;
        this.countdown = 10;
        // this.apiService.continueGame().subscribe(r => console.log(r));

    }

    ngOnInit(): void {
    }

    ngOnDestroy(): void {
        this.destroyed$.next();
        this.destroyed$.complete();
    }

}