import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import EventService from '../shared/services/EventService';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { environment } from '../../environments/environment';

@Component({
    selector: 'tts-login',
    standalone: true,
    imports: [MatButtonModule, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
    templateUrl: './tts-login.component.html',
    styleUrl: './tts-login.component.scss'
})
export class TtsLoginComponent implements OnInit, OnDestroy {
    api_keys: string[];
    selected_api_key: string|undefined;

    private subscription: Subscription|undefined;

    constructor(private events: EventService, private http: HttpClient, private router: Router) {
        this.api_keys = [];
    }

    ngOnInit(): void {
        this.http.get(environment.API_HOST + '/keys', {
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('jwt')
            }
        }).subscribe((data: any) => this.api_keys = data.map((d: any) => d.id));

        this.subscription = this.events.listen('tts_login_ack', _ => {
            if (document.location.href.includes('/tts-login')) {
                this.router.navigate(['/policies'])
            }
        });
    }

    ngOnDestroy(): void {
        if (this.subscription)
            this.subscription.unsubscribe();
    }

    login() {
        if (!this.selected_api_key)
            return;

        this.events.emit('tts_login', this.selected_api_key);
    }
}