import {Component, Inject, Input, OnInit} from '@angular/core';
import AuthApiService, {OAuthProviderData} from "@api/v1/authApiService";
import {OAuthProvider} from "@model/oAuthProvider";
import {ToastrService} from "ngx-toastr";
import {
  MAT_DIALOG_DATA, MatDialog,
  MatDialogActions,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle
} from "@angular/material/dialog";
import {MatButton} from "@angular/material/button";

interface AvailableOAuthProviders extends OAuthProviderData {
  disabled: boolean;
}

@Component({
  selector: 'app-delete-confirm-dialog',
  template: `
    <h1 mat-dialog-title>Удалить провайдера?</h1>
    <mat-dialog-content>
      <p>Вы уверены, что хотите удалить провайдера {{ data.provider.name }}?</p>
    </mat-dialog-content>
    <mat-dialog-actions style="display: flex; justify-content: flex-end;">
      <button mat-button (click)="onCancel()">Отмена</button>
      <button mat-raised-button color="warn" (click)="onConfirm()">Удалить</button>
    </mat-dialog-actions>
  `,
  imports: [
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatButton
  ]
})
export class DeleteConfirmDialog {

  constructor(
    public dialogRef: MatDialogRef<DeleteConfirmDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
  }

  onConfirm(): void {
    this.dialogRef.close(true);
  }

  onCancel(): void {
    this.dialogRef.close(false);
  }
}

@Component({
  selector: 'OAuthProviders',
  imports: [],
  templateUrl: './OAuthProviders.html',
  styleUrl: './OAuthProviders.css',
  providers: [AuthApiService]
})
export class OAuthProviders implements OnInit {
  protected providers: AvailableOAuthProviders[] = [];
  protected _activeProvidersId: OAuthProvider[] = [];

  @Input() message: string = 'Вы можете войти в аккаунт через';
  @Input() activeProviders: string[] = [];

  @Input() set activeProvidersId(data: OAuthProvider[]) {
    this._activeProvidersId = data;
    this.updateDisabledProviders();
  }

  @Input() canUnlink: boolean = false;

  constructor(authApi: AuthApiService, private notify: ToastrService, private dialog: MatDialog) {
    authApi.availableProviders().subscribe(providers => this.updateDisabledProviders(providers));
  }

  private updateDisabledProviders(data: OAuthProviderData[] | null = null) {
    this.providers = (data ?? this.providers).map(provider => {
      return {
        ...provider,
        disabled: this._activeProvidersId.includes(provider.provider) || this.activeProviders.includes(provider.providerName)
      };
    });
  }

  ngOnInit(): void {
    window.addEventListener('message', (event) => {
      if (event.data && event.data.success === false) {
        console.error(event.data.message);
        this.notify.error(event.data.message, 'OAuth ошибка');
      } else {
        this.activeProvidersId.push(event.data.provider);
        this.updateDisabledProviders();
      }
    });
  }

  protected openOAuth(provider: AvailableOAuthProviders) {
    console.log(provider.redirect);
    const oauthWindow = window.open(
      provider.redirect,
      '_blank',
    );

    if (!oauthWindow) {
      this.notify.error('Не удалось открыть OAuth окно');
      return;
    }
  }

  protected confirmDelete(provider: AvailableOAuthProviders) {
    const dialogRef = this.dialog.open(DeleteConfirmDialog, {data: {provider}});

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.deleteProvider(provider);
      }
    });
  }

  protected deleteProvider(provider: AvailableOAuthProviders) {
    // todo: remove provider
  }
}