import { Component, OnInit } from '@angular/core';
import {StatusService} from '../../services/status.service';
import {AppStateService} from '../../services/app-state.service';
import {Observable} from 'rxjs';
import {VpnStatusViewModel} from '../../view-models/vpn/vpn-status.view-model';
import {SiteStatusViewModel} from '../../view-models/vpn/site-status.view-model';
import {HostStatusViewModel} from '../../view-models/vpn/host-status.view-model';

@Component({
    selector: 'app-vpn-status',
    templateUrl: './vpn-status.component.html',
    styleUrls: [ './vpn-status.component.css' ]
})
export class VpnStatusComponent implements OnInit {
    promise = null;
    vpnStatus$: Observable<VpnStatusViewModel> = null;

    constructor(private appStateService: AppStateService, private statusService: StatusService) {
        this.vpnStatus$ = appStateService.onVpnStatusUpdated();
        this.appStateService.setUiStateTitle('VPN Status');
        this.appStateService.setUiStateToolbarTitle('VPN Status');
    }

    ngOnInit() {
        this.getStatus();
    }

    getStatus(): void {
        this.promise = this.statusService.getVpnStatus();
    }

    onclick(): void {
        this.getStatus();
    }

    trackSiteByName(index: number, site: SiteStatusViewModel): string {
        return site.name;
    }

    trackHostStatusByIp(index: number, hostStatus: HostStatusViewModel): string {
        return hostStatus.ip;
    }
}