import { Component, inject, Injector, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { UserService } from '../auth/user.service';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { ClientCardComponent } from './components/card/card.component';
import { Client } from '../model/client.interface';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CreateClientComponent } from './components/create-client/create-client.component';
import { CreateHotToastRef, HotToastService } from '@ngxpert/hot-toast';
import {MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef} from '@angular/material/bottom-sheet';
import { LoginChartComponent } from './components/charts/login/login.chart.component';
import { HelpComponent } from './components/help/help.component';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [ClientCardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule, LoginChartComponent],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss'
})
export class DashboardComponent implements OnInit {

  private userService: UserService = inject(UserService);
  private router: Router = inject(Router);
  private http: HttpClient = inject(HttpClient);
  private dialog: MatDialog = inject(MatDialog);
  private toast: HotToastService = inject(HotToastService);
  private bottomSheet = inject(MatBottomSheet);
  private injector: Injector = inject(Injector);

  @ViewChild('listSection', { read: ViewContainerRef, static: true }) clientList!: ViewContainerRef;
  clients: Client[] = [];


  ngOnInit(): void {
    if (!this.userService.user) {
      this.router.navigateByUrl("/login");
      return;
    }
    this.load();
  }

  load() {
    this.http.get<Client[]>('api/app/user/clients').subscribe(res => {
      this.clients = res;
      this.createList();
    })
  }

  createList() {
    this.clientList.clear();
    this.clients.forEach(c => {
        const ref = this.clientList.createComponent(ClientCardComponent);
        ref.instance.client = c;
        ref.instance.onDelete.subscribe(() => {
          this.openDeleteDialog(c)
        })
    })
  }

  get userName(): string {
    return this.userService.user?.firstName + ' ' + this.userService.user?.lastName
  }

  createClient() {
    const ref = this.dialog.open(CreateClientComponent, {
      panelClass: 'create-client__dialog'
    })
    ref.componentInstance.createdClient.subscribe(() => {
      this.load();
    })
  }

  openDeleteDialog(client: Client) {
    const toast = this.toast.loading(`Lösche Client ${client.clientName} ...`, { autoClose: false});
    this.bottomSheet.open(DeleteClientConfirmation).afterDismissed()
    .subscribe({
      next: data => {
        if (data) {
          this.deleteClient(client, toast)
        } else {
          toast.updateMessage('Löschen abgebrochen');
          toast.updateToast({
            type: 'error',
            dismissible: true,
          })
        }
      }
    })
  }

  deleteClient(client: Client, toast: CreateHotToastRef<unknown>) {
    
    this.http.delete('api/app/user/client/' + client.id)
    .subscribe({
      next: () => {

        toast.updateMessage(`Client ${client.clientName} gelöscht`);
        toast.updateToast({
          type: 'success',
          dismissible: true,

        });
        this.load();
        setTimeout(() => {
          toast.close();
        }, 3000);
      },

      error: () => {
        toast.updateMessage(`Client ${client.clientName} konnte nicht gelöscht werden`);
        toast.updateToast({
          type: 'error',
          dismissible: true,

        })
      }
    })
  }
  
  logout() {
    this.userService.logout();
  }

  openHelp() {
    this.dialog.open(HelpComponent)
  }
  

}


@Component({
  selector: 'bottom-sheet-overview-example-sheet',
  template: `
  <h3>Soll der Client wirklich gelöscht werden?</h3>
  <h5>Danach kann sich niemand mehr einloggen und alle Daten werden gelöscht.</h5>
  <div class="flex-row" style="justify-content: space-between">
  <button mat-flat-button color="warn" (click)="delete()">Löschen</button>
  <button mat-flat-button (click)="cancel()">Abbrechen</button>
  </div>
  `,
  standalone: true,
  imports: [MatButtonModule],
})
export class DeleteClientConfirmation {
  private _bottomSheetRef =
    inject<MatBottomSheetRef<DeleteClientConfirmation>>(MatBottomSheetRef);

  delete() {
    this._bottomSheetRef.dismiss(true)
  }
  cancel() {
    this._bottomSheetRef.dismiss(false)
  }
}