import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { ActivatedRoute } from '@angular/router';
import { HermesClientService } from '../../hermes-client.service';
import { MatCardModule } from '@angular/material/card';
import EventService from '../../shared/services/EventService';
import { Subscription } from 'rxjs';
import { ApiKeyService } from '../../shared/services/api/api-key.service';

@Component({
  selector: 'tts-login',
  standalone: true,
  imports: [
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatSelectModule,
    ReactiveFormsModule,
  ],
  templateUrl: './tts-login.component.html',
  styleUrl: './tts-login.component.scss'
})
export class TtsLoginComponent implements OnInit, OnDestroy {
  private readonly client = inject(HermesClientService);
  private readonly route = inject(ActivatedRoute);
  private readonly keyService = inject(ApiKeyService);
  private readonly eventService = inject(EventService);

  keyControl = new FormControl<string | null>('');
  api_keys: { id: string, label: string }[] = [];
  subscriptions: (Subscription | null)[] = [];


  ngOnInit(): void {
    this.route.data.subscribe(d => this.api_keys = d['keys']);

    this.subscriptions.push(this.eventService.listen('impersonation', _ => this.reset()));
    this.subscriptions.push(this.eventService.listen('logoff', _ => this.reset()));
  }

  ngOnDestroy(): void {
    for (let subscription of this.subscriptions) {
      if (subscription) {
        subscription.unsubscribe();
      }
    }
  }

  login(): void {
    if (!this.keyControl.value)
      return;

    this.client.login(this.keyControl.value);
  }

  private reset() {
    this.api_keys = [];
    this.keyService.fetch().subscribe(keys => this.api_keys = keys);
  }
}