import { Component, OnDestroy, OnInit } from '@angular/core';
import { io, Socket } from "socket.io-client";
import { EventService } from "./services/event.service";
import {EventStateChanged, ServerEvent, VersusBeginEvent} from "../types/server-event";
import { ApiService } from "./services/api.service";
import { ActivatedRoute, Router } from "@angular/router";
import { filter, map, takeUntil } from "rxjs/operators";
import { ToastService } from "./toast.service";
import { VoiceService } from "./services/voice.service";
import {delay, delayWhen, Subject} from "rxjs";
import { getAudioPath } from "./helper/tts.helper";
import {animate, keyframes, style, transition, trigger} from "@angular/animations";
import {environment} from "../environments/environment";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('2000ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )]
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'thanksgiving';
  connection = io(environment.WEBSOCK_URL, { transports: ['websocket']});
  destroyed = new Subject<void>();
  versusData: VersusBeginEvent|null = null;
  audioSrc: string;

  constructor(
      private eventService: EventService,
      private apiService: ApiService,
      private router: Router,
      private toastService: ToastService,
      private voiceService: VoiceService,
      private routeSnapshot: ActivatedRoute) {
  }


  ngOnInit(): void {
    this.connection.on('events', (data: ServerEvent<any>) => {
      console.log(`event:`);
      console.log(data);
      this.eventService.emit(data);
    });
    this.apiService.getAppState('main').pipe(takeUntil(this.destroyed),delay(300)).subscribe((result) => {
      if(this.router.url.indexOf('admin') === -1 || window.location.href.indexOf('admin') === -1) {
        this.router.navigate([`/${result.value}`]).then(() => {
          console.log(`navigated to ${result.value}`);
        })
      }
    });
    this.eventService.stateChangedEvent.pipe(
        map(e => e.data),
    ).subscribe(result => {
      this.router.navigate([`${result.value}`])
    })
    this.eventService.notificationEvent.subscribe((event) => {
      this.toastService.showToast(event.data.text, event.data.timeout);
    });
    this.voiceService.voiceSubject.pipe(takeUntil(this.destroyed)).subscribe((text) => {
      console.log(text);
      this.audioSrc = text;
    })
    this.setupVersusHandler();
  }
  ngOnDestroy() {
    this.destroyed.complete();
  }

  onAudioEnded() {
    this.voiceService.audioEnded();
  }

  private setupVersusHandler() {
    this.eventService.versusBegin.pipe(takeUntil(this.destroyed)).subscribe(r => {
      if (this.router.url.indexOf('admin') === -1) {
        this.versusData = r.data;
      }
    })
    this.eventService.versusEnd.pipe(takeUntil(this.destroyed)).subscribe((r) => {
      console.log(r);
      this.versusData = null;
    })
  }
}