import { Component, ElementRef, HostListener, Input } from '@angular/core'
import { tap, map } from 'rxjs/operators';
import { PaymentServiceIconService } from './payment-service-icon.service';

@Component({
    moduleId: module.id + '',
    selector: 'payment-service-icon',
    templateUrl: './payment-service-icon.template.html',
    styleUrls: ['payment-service-icon.style.scss'],
    providers: [PaymentServiceIconService]
})
export class PaymentServiceIconComponent {

    @Input('orderId') private orderId!: string | number

    public isLoading: boolean = true
    public color: string
    public tooltip: string = "Loading"

    constructor(
        private service: PaymentServiceIconService
    ) {}

    @HostListener('dblclick') doubleClick() {
        navigator.clipboard.writeText(this.tooltip)
    }

    ngOnInit(): void {
        this.getStatus()
    }

    private statusChanged(tooltip, color, loading = false): void {
        this.tooltip = tooltip
        this.color = color
        this.isLoading = loading
    }

    private getStatus() {
        this.service.getStatus(this.orderId).pipe(
            tap((response) => {
                if(response.status === 'error') {
                    throw response.data.errorMessage
                }
            }),
            map((response) => {
                return response.data
            })
        ).subscribe({
            next: (response: {nav_status: string, nav_status_color: string}) => {
                this.statusChanged(response.nav_status, response.nav_status_color)
            },
            error: (error: string) => {
                this.statusChanged(error, '#EF5350')
            }
        })
    }
}